2139

İki sütunlu bir düzenim var - sol divve sağ div.

Sağda divbir gri var background-colorve kullanıcının tarayıcı penceresinin yüksekliğine bağlı olarak dikey olarak genişlemesi gerekiyor. Şu anda buradaki background-colorson içerik parçasının sonları div.

Denedim height:100%, min-height:100%;vb

html css height

— mikrofon
kaynak

7

Bu soruyu faydalı bulabilirsiniz. Stackoverflow.com/questions/1366548/…

— Ivan Nevostruev

Gitmek için iyi bir yol, ama vh, vw vb birimleri buggy olduğu bilinmektedir. İhtiyacınız varsa bu hafif js alternatifi var: joaocunha.github.io/vunit

— daha keskin görün

İşte heightyüzde değerleri ile CSS özelliği hakkında basit ve net bir açıklama : stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

yüksekliği kullanabilirsiniz: 100vh; css mülkiyet

— Vishnu Chauhan

2833

Bir kaç CSS 3 ölçüm birimi var:

Görünüm Penceresi Yüzdesi (veya Vizör Göreli) Uzunlukları

Görünüm Yüzdesi Uzunlukları nedir?

Yukarıdaki bağlantılı W3 Aday Tavsiyesinden:

Görünüm yüzdesi uzunlukları, ilk içeren bloğun boyutuna göredir. İlk içeren bloğun yüksekliği veya genişliği değiştirildiğinde, bunlar uygun şekilde ölçeklenir.

Bu birimler vh(görüntüleme alanı yüksekliği), vw(görüntüleme alanı genişliği), vmin(görüntüleme alanı minimum uzunluğu) ve vmax(görüntüleme alanı maksimum uzunluğu) şeklindedir.

Bu, bir bölücünün tarayıcının yüksekliğini doldurması için nasıl kullanılabilir?

Bu soru için şunu kullanabiliriz vh: 1vhgörünümün yüksekliğinin% 1'ine eşittir. Yani, 100vhöğenin DOM ağacında nerede olduğuna bakılmaksızın tarayıcı penceresinin yüksekliğine eşittir:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Bu tam anlamıyla ihtiyaç duyulan şey. İşte bunun bir JSFiddle örneği kullanımda.

Bu yeni birimleri hangi tarayıcılar destekliyor?

Bu, şu anda Opera Mini dışındaki tüm güncel büyük tarayıcılarda desteklenmektedir. Check out Can I kullanımını ... daha fazla destek için.

Bu, birden çok sütunla nasıl kullanılabilir?

Bir sol ve bir sağ bölücü içeren el altında sorusuna, söz konusu olduğunda, burada olduğu JSFiddle örneği her ikisinin de dahil iki sütunlu düzeni gösteren vhve vw.

Nasıl `100vh`farklı için `100%`?

Örneğin bu düzeni ele alalım:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Buradaki petiket% 100 yüksekliğe ayarlanmıştır, ancak içeriğinin div200 piksel yüksekliğe sahip olması nedeniyle , 200 pikselin% 100'ü, yüksekliğin % 100'ü değil 200 piksel olur body. Kullanılması 100vhyerine demektir petiket% 100 yüksekliği olacak bodybakılmaksızın divyüksekliği. Farkı kolayca görmek için bu eşlik eden JSFiddle'a bir göz atın !

— James Donnelly
kaynak

35

Öğe görünüm penceresinden daha uzun olduğunda kaydırma ile garip davranış. Kap, görüntü alanı yüksekliğini korur ve içerik kaptan dışarı akar. min-height:100vhBu sorunu çözmek için görünüyor.

— wdm

8

@DGDD, iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 ve IEMobile 10.0'da çalışır. Hangi mobil tarayıcıya başvurduğunuzu bilmiyorum, ancak bu 4 tanesi kullanılan mobil tarayıcıların% 90'ından fazlasını oluşturuyor. Bu soru mobil tarayıcılarda çalışmak için bir gereklilik belirtmemektedir.

— James Donnelly

1

@ robross0606 yine burada cevapladığım soru değil. Bu tamamen farklı bir soru, cevabı gerçekten flexbox kullanıyor: stackoverflow.com/questions/90178/…

— James Donnelly

1

@ JamesDonnelly Evet, biliyorum. Ama bu sorunun cevabı bu değil. Tarayıcı penceresi yüksekliği, gezinme çubuğu yüksekliğini içerir. Bu daha iyi olurdu, çünkü mobil tarayıcılarda, gezinme çubuğu her gösterildiğinde / gizlendiğinde görünüm alanı yüksekliği değişir.

— RedClover

3

Mobil uyarı: gezinme çubuğunu dikkate almayan Chrome mobil ile vh mess kullanmak. Ardından sayfanızın üstünü onunla kaplar. Orada bir

— menünüz

568

Bir yüksekliğini ayarlamak istiyorsanız <div>veya herhangi bir elementin, sen yüksekliğini ayarlamalısınız <body>ve <html>çok% 100'e. Sonra% 100 ile eleman yüksekliğini ayarlayabilirsiniz :)

İşte bir örnek:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
kaynak

109

Yanılıyorsam beni düzeltin, ama aslında çalışmak için div'in tüm ebeveynlerine yüksekliği ayarlamanız gerektiğini düşünüyorum

— Dany Y

Sürekli tasarım kullanıyorsam bu işe yaramaz: sayfa 6000 piksel yükseklik, bloklar sayfaları temsil ediyor. Bir bloğun tam olarak görünüm alanının yüksekliği olmasını istiyorum.

— Qwerty

@DanyY, haklısın. Yüksekliği, ekranın yüksekliğine sahip her şeyin sonuçlarıyla div'ın tüm ebeveynlerine ayarlamanız gerekir. İşte bir örnek .

— toto_tico

Bu hile bazı durumlar için çalışır, ancak bazı durumlar için de olmaz. alkış

— Ariona Rian

8

@Qwerty, işte çözüm. Böylece Seti css: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Eğer 3 bölümünüz varsa, bu olacakhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

Elemanlarınızı kesinlikle konumlandırabiliyorsanız,

position: absolute;
top: 0;
bottom: 0;

yapardı.

— Tinister
kaynak

16

Bu, öğeyi belge akışından çıkararak ve alt değerini üst öğesinin yüksekliğine çimentolayarak çalışır. İçeriğiniz üst öğesinin yüksekliğini aştığında bu ideal değildir.

— Ricky Boyce

1

Bu, ebeveynlerinden biri olarak ayarlandığında position:relativeve yüksekliği görünümün% 100'ü olmadığında çalışmaz. Üst ve alt, bir sonraki göreceli veya mutlak atasına göre ayarlanır.

— Seika85

141

Görünüm bağlantı noktası birimini CSS'de kullanabilirsiniz:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

— MrGeek
kaynak

1

@Lamar Bunun * { box-sizing: border-box; }olmasını önlemek için kullanmalısınız .

— Luca Steeb

2

Görüntüleme birimleri üzerinde tarayıcı desteği için caniuse kontrol etmeye değer: caniuse.com/#feat=viewport-units

— Dave Everitt

133

Görünüm yüksekliğinin% 1'ine vhgöre olan bu durumda kullanabilirsiniz ...

Bu, yüksekliği örtmek istiyorsanız, sadece kullanın 100vh.

Sizin için çizdiğim aşağıdaki resme bakın:

Sizin için oluşturduğum pasajı aşağıdaki gibi deneyin:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

<div class="left"></div>
<div class="right"></div>

Snippet'i genişlet

— Alireza
kaynak

100vh vermek sayfa için dikey bir kaydırma ekledi, bu yüzden bunu takip etti ama işe yaramadı. stackoverflow.com/questions/44645465/… . Dikey kaydırmadan kaçınmanın ve div'in herhangi bir içerik olmadan tabana değmesini sağlamanın bir yolu var mı?

— DILEEP THOMAS

@DILEEPTHOMAS var aramakpaddings/margins

— Efsaneler

@ Kök dosyada * {margin: 0, padding: 0} olarak

— vermeye

1

@DILEEPTHOMAS burada Alireza tarafından sağlanan bu örneğe bir göz atın, ayrıca bir kaydırma çubuğu vardır, çünkü gövde elemanının bir marjı vardır. Kenar boşluğunu kaldırırsanız kaydırma çubuğu kaybolur. Farklı nedenleri olabilir, ama bu önce ben ödeme.

— Efsaneler

102

En çok oy alan çözümler de dahil olmak üzere diğer tüm çözümler, esnek modelevh kıyasla daha düşük çözümüne .

CSS flex modelinin ortaya çıkmasıyla, % 100 yükseklik problemini çözmek çok, çok kolay hale gelir: height: 100%; display: flexebeveyn üzerinde kullanım veflex: 1 üzerinde ve alt elemanlarda kullanın. Konteynerlerindeki tüm kullanılabilir alanı otomatik olarak kaplayacaklardır.

İşaretlemenin ve CSS'nin ne kadar basit olduğuna dikkat edin. Hiçbir tablo kesmek ya da bir şey.

Flex modeli, IE11 + 'nın yanı sıra tüm büyük tarayıcılar tarafından desteklenir .

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

Snippet'i genişlet

Esnek model hakkında daha fazla bilgiyi buradan edinebilirsiniz.

— Airen
kaynak

3

bir uyarı: Sol / sağ kaplardan birinin içeriği orijinal gövde yüksekliğini aştığında, karşı kap yeniden boyutlandırılmaz, bu nedenle kaplar farklı yüksekliklerle sonuçlanır.

— schellmax

1

Schellmax sorununa dikkat çeken nokta: jsfiddle.net/Arete/b4g0o3pq

— Arete

Tasarıma bağlı olarak, overflow-y: auto;"kaplar orijinal gövde yüksekliğini aşar".

— Evi Song

54

Birkaç önemli ayrıntıdan bahsetmiyorsunuz:

Düzen sabit genişliği mi?
Sütunlardan biri veya her ikisi sabit genişlikte mi?

İşte bir olasılık:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Snippet'i genişlet

Hangi sütunların sabitlenmesi ve hangilerinin sıvı olması gerektiğine bağlı olarak bu konuda birçok varyasyon vardır. Bunu mutlak konumlandırma ile de yapabilirsiniz, ancak genellikle bunun yerine şamandıralar kullanarak daha iyi sonuçlar (özellikle çapraz tarayıcı açısından) buldum.

— cletus
kaynak

34

Benim için işe yarayan buydu:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

Snippet'i genişlet

Kullanım position:fixedyerine position:absolute, bölünme ekranın sonuna kadar genişleyecektir aşağı kaydırma bile bu şekilde.

— Majda
kaynak

"Position: [fixed | absolute]" kodlu bu kod, açılır pencerelerin arka planları için mükemmeldir (bir resmi yakınlaştırmak için tıklattığınızda olduğu gibi), ancak gerçekten aşağı kaydırmanız gereken durumlarda bu kadar emin değildir. Hala yararlı hamur!

— Mannyfatboy

29

İşte yükseklik için bir düzeltme.

CSS kullanımınızda:

#your-object: height: 100vh;

Desteklemeyen tarayıcılar vh-unitsiçin modernizr kullanın.

Bu komut dosyasını ekle (için algılama eklemek için vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Son olarak #your-object, tarayıcı desteklemiyorsa görünüm penceresinin yüksekliğini eklemek için bu işlevi kullanın vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

— Jonas Sandstedt
kaynak

23

100% genişlik ve yükseklik için farklı çalışır.

Belirttiğinizde width: 100%"kullanılabilir genişliğin% 100'ünü ana öğeden veya pencerenin genişliğinden almak" anlamına gelir.

Belirttiğinizde height: 100%, yalnızca "ana öğeden kullanılabilir yüksekliğin% 100'ünü al" anlamına gelir. Bu, bir üst düzey öğede yükseklik belirtmezseniz, tüm çocukların 0yüksekliği ya da üst öğenin yüksekliği olacaktır ve bu nedenle en üst öğeyi min-heightpencere yüksekliğine sahip olacak şekilde ayarlamanız gerekir .

Vücudu her zaman 100vh'lik bir minimum yüksekliğe sahip olacağını belirtirim ve konumlandırmayı ve hesaplamaları kolaylaştırır,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
kaynak

16

min-height: 100%Bir yükseklik ekleyin ve belirtmeyin (veya otomatik olarak koyun). Tamamen benim için iş yaptı:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— Remus Simion
kaynak

16

100vw === Görünüm çerçevesinin genişliğinin% 100'ü.

100vh === Görünüm yüksekliğinin% 100'ü.

divTarayıcı penceresi boyutunun genişliğini veya yüksekliğini% 100 ayarlamak istiyorsanız kullanmalısınız:

Genişlik için: 100vw

Boy için: 100vh

Veya daha küçük bir boyut ayarlamak isterseniz, CSS calcişlevini kullanın . Misal:

#example {
    width: calc(100vw - 32px)
}

— Руслан
kaynak

12

Yüksekliğini <div>% 100'e ayarlamak için çeşitli yöntemler vardır .

Yöntem (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

Snippet'i genişlet

Vh kullanarak Yöntem (B):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

Snippet'i genişlet

Esnek kutu kullanarak yöntem (c):

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

Snippet'i genişlet

— Santosh Khalse
kaynak

12

Bu benim için çalıştı:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Alındığı bu sayfada .

— test yapmak
kaynak

12

En basit yol bunu böyle yapmaktır.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Snippet'i genişlet

— Emilo
kaynak

11

Ayarlamak için deneyin height:100%içinde html&body

html, 
body {
    height: 100%;
}

Ve 2 div yüksekliği aynı kullanmak istiyorsanız veya üst öğe display:flexözelliğini ayarlayın.

— Muhammed Javed
kaynak

9

Buradaki tüm cevaplarla bile, hiçbirinin sorunu gerçekten çözmediğini bulmak beni şaşırttı. Ben kullandıysanız 100vh height/ min-heightiçerik uzun bir sayfa daha iken, düzen kırdı. Bunun yerine 100% height/ öğesini min-heightkullansaydım, içerik sayfa yüksekliğinden daha az olduğunda düzen bozuldu.

Her iki durumu da çözdüğüm bulduğum çözüm, ilk iki cevabı birleştirmekti:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— machineghost
kaynak

1

Sabit bir 90 piksel yüksekliğinde navbar var, bu yüzden sadece "100vh" değerinizi "calc (100vh - 90px)" olarak değiştirmek zorunda kaldım

— Mark Jackson

8

"Px" yerine "vh" birimini kullanmanız yeterlidir. Bu, görüntüleme noktası yüksekliği anlamına gelir.

height: 100vh;

— Khalifeh
kaynak

7

Blok öğeleri varsayılan olarak üst öğelerinin tam genişliğini tüketir.

Dikey olarak istiflenecek tasarım gereksinimlerini bu şekilde karşılarlar.

9.4.1 Blok biçimlendirme bağlamları

Bir blok biçimlendirme bağlamında, kutular, içerdiği bir bloğun üstünden başlayarak dikey olarak birbiri ardına düzenlenir.

Ancak bu davranış, yüksekliğe uzanmaz.

Varsayılan olarak, çoğu öğe içeriklerinin yüksekliğidir (height: auto ).

Genişlikten farklı olarak, fazladan boşluk istiyorsanız bir yükseklik belirtmeniz gerekir.

Bu nedenle, şu iki şeyi aklınızda bulundurun:

tam genişlik istemiyorsanız, bir blok öğesinin genişliğini tanımlamanız gerekir
içerik yüksekliği istemiyorsanız, bir öğenin yüksekliğini tanımlamanız gerekir

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

Snippet'i genişlet

— Michael Benjamin
kaynak

7

İşte tam olarak önceki cevaplarda olanlara benzemeyen bir şey, ancak bazılarına yardımcı olabilir:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-it
kaynak

6

FlexBox CSS Kullan

Flexbox bu tür problemlere mükemmel uyum sağlar. Çoğunlukla içeriği yatay yönde yerleştirmekle bilinse de, Flexbox aslında dikey yerleşim sorunları için de işe yarar. Tek yapmanız gereken dikey bölümleri esnek bir kaba sarmak ve hangilerini genişletmek istediğinizi seçmek. Konteynerlerindeki tüm kullanılabilir alanı otomatik olarak kaplayacaklardır.

— robross0606
kaynak

6

Seçeneklerden biri CSS tablosunu kullanmaktır. Mükemmel tarayıcı desteğine sahiptir ve hatta Internet Explorer 8'de çalışır.

JSFiddle Örneği

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Snippet'i genişlet

— Çıkartma
kaynak

6

Bunu deneyin - test edildi:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Düzenleme: 2020 güncellemesi:

vhŞimdi kullanabilirsiniz :

#right, #left {
  height: 100vh
}

— lukaszkups
kaynak

5

Kullanabilirsiniz display: flexveheight: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

Snippet'i genişlet

— Thuc Nguyen
kaynak

Bu yanıtın yalnızca 26 gün önce yayınlanmış tam olarak uygulandığı bir çözüm de dahil olmak üzere, zaten birkaç flexbox çözümü yayınlanmıştır.

— TylerH

5

İki şey yapmanız gerekiyor, biri yüksekliği zaten% 100'e ayarlamak. İkincisi, konumu mutlak olarak ayarlar. Hile yapmalı.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Kaynak

— Prabhakar Undurthi
kaynak

3

Eski çözüm. vhBunun yerine kullanın .

— avalanche1

1

Kullanmayın vhmobil cihazlarda duyarlı tasarım kullanmayı planlıyorsanız.

— Alexander Kim

5

Aşağıdaki CSS'yi deneyin:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Problemli çocuk
kaynak

5

Aslında benim için en uygun olanı vh özelliği .

React uygulamamda div'in yeniden boyutlandırıldığında bile sayfanın yüksek eşleşmesini istedim. Denedim height: 100%;, overflow-y: auto;ama hiçbiriheight:(your percent)vh; tasarlandığı gibi çalıştığında işe yaramadı.

Not: dolgu, yuvarlak köşeler vb. Kullanıyorsanız, bu değerleri vhmülkünüzün yüzdesinden çıkardığınızdan emin olun veya ekstra yükseklik ekler ve kaydırma çubuklarının görünmesini sağlar. İşte benim örnek:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

— JimmyFlash
kaynak

Bu arada, elemanınızın yüksekliğini etkileyen 'yuvarlatılmış köşelerden' bahsediyorsunuz, ayarın box-sizing: border-box;bunun üstesinden geleceğini umuyorum, bu da elemanın boyutunu (genişlik ve yükseklik) hesaplarken sınır boyutunun da dikkate alındığı anlamına gelir.

— Neek

5

Bunu Bir Kez Deneyin ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

Snippet'i genişlet

— Sunil Rajput
kaynak

3

Eğer kullanırsanız position: absolute;ve jQuery şunu kullanabilirsiniz

$("#mydiv").css("height", $(document).height() + "px");

— John Smith İsteğe Bağlı
kaynak

1

JavaScript kullanmaya gerek yoktur. Modern çözüm CSS esnek kutu modelini kullanmaktır .

— Dan Dascalescu

JS kullanıyorsanız, bunu oldukça yararlı buldum. NOT: F5 veya CTRL + F5 kullanarak farklı sonuçlar döndürüleceğinden, bunu $ (window) .load () ile kullanmak en iyisidir. Daha fazla bilgi için bu bağlantıyı kontrol edin. stackoverflow.com/questions/13314058/…

— edward

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— RamNiwas Sharma
kaynak

1

Olası yanlış yazım: widht(sonuna yakın)

— Peter Mortensen

Tarayıcı penceresinin% 100 yüksekliğinde div nasıl yapılır

Görünüm Penceresi Yüzdesi (veya Vizör Göreli) Uzunlukları

Görünüm Yüzdesi Uzunlukları nedir?

Bu, bir bölücünün tarayıcının yüksekliğini doldurması için nasıl kullanılabilir?

HTML

CSS

Bu yeni birimleri hangi tarayıcılar destekliyor?

Bu, birden çok sütunla nasıl kullanılabilir?

Nasıl 100vhfarklı için 100%?

HTML

CSS

Nasıl `100vh`farklı için `100%`?