2140

Saya memiliki tata letak dengan dua kolom - kiri divdan kanan div.

Kanan divmemiliki abu-abu background-color, dan saya perlu memperluas secara vertikal tergantung pada ketinggian jendela browser pengguna. Saat ini background-colorujung di bagian terakhir konten di dalamnya div.

Saya sudah mencoba height:100%, min-height:100%;, dll

html css height

— mikrofon
sumber

7

Semoga Anda akan menemukan pertanyaan ini bermanfaat stackoverflow.com/questions/1366548

— #### Ivan Nevostruev

Cara yang baik untuk pergi, tetapi unit vh, vw dll diketahui buggy. Ada alternatif js ringan ini jika Anda membutuhkannya: joaocunha.github.io/vunit

— lihat lebih tajam

Berikut adalah penjelasan sederhana dan jelas tentang heightproperti CSS dengan nilai persentase: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

Anda dapat menggunakan ketinggian: 100vh; properti css

— Wisnu Chauhan

2833

Ada beberapa unit pengukuran CSS 3 yang disebut:

Panjang Viewport-Persentase (atau Relatif-Viewport)

Berapa Panjang Viewport-Persentase?

Dari Rekomendasi Kandidat W3 yang tertaut di atas:

Panjang viewport-persentase relatif terhadap ukuran blok berisi awal. Ketika tinggi atau lebar blok yang mengandung awal diubah, mereka diskalakan sesuai.

Unit-unit ini adalah vh(tinggi viewport), vw(lebar viewport), vmin(panjang minimum viewport) dan vmax(panjang maksimum viewport).

Bagaimana ini bisa digunakan untuk membuat pembagi mengisi ketinggian browser?

Untuk pertanyaan ini, kita dapat menggunakan vh: 1vhsama dengan 1% dari tinggi viewport. Artinya, 100vhsama dengan ketinggian jendela browser, terlepas dari di mana elemen terletak di pohon DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Ini benar-benar semua yang dibutuhkan. Berikut adalah contoh JSFiddle dari ini digunakan.

Browser apa yang mendukung unit-unit baru ini?

Ini saat ini didukung pada semua peramban utama terkini selain dari Opera Mini. Lihat Dapatkah saya menggunakan ... untuk dukungan lebih lanjut.

Bagaimana ini bisa digunakan dengan banyak kolom?

Dalam kasus pertanyaan yang ada, menampilkan pembagi kiri dan kanan, berikut adalah contoh JSFiddle yang menunjukkan tata letak dua kolom yang melibatkan keduanya vhdan vw.

Bagaimana `100vh`bedanya dengan `100%`?

Ambil tata letak ini misalnya:

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

The ptag di sini diatur untuk% ketinggian 100, tetapi karena yang mengandung divmemiliki 200 piksel tinggi, 100% dari 200 pixel menjadi 200 pixel, tidak 100% dari bodyketinggian. Menggunakan 100vhbukan berarti bahwa ptag akan tinggi 100% dari bodyterlepas dari divketinggian. Lihatlah JSFiddle yang menyertainya untuk melihat perbedaannya dengan mudah!

— James Donnelly
sumber

35

Perilaku aneh dengan menggulir ketika elemen sebenarnya lebih tinggi dari viewport. Wadah mempertahankan ketinggian viewport dan konten mengalir keluar dari wadah. min-height:100vhtampaknya mengatasi ini.

— wdm

8

@DGDD ini berfungsi di iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 dan IEMobile 10.0. Saya tidak tahu peramban seluler mana yang Anda referensikan, tetapi keempat peramban itu membuat lebih dari 90% peramban seluler digunakan. Pertanyaan ini tidak menentukan persyaratan untuk bekerja di browser seluler.

— James Donnelly

1

@ robross0606 lagi itu bukan pertanyaan yang saya jawab di sini. Itu pertanyaan yang sama sekali berbeda, yang jawabannya memang menggunakan flexbox: stackoverflow.com/questions/90178/…

— James Donnelly

1

@ James Donnelly Ya, saya tahu. Tapi itu bukan jawaban untuk pertanyaan ini. Tinggi jendela browser termasuk tinggi navbar. Ini akan lebih baik, karena pada browser seluler, tinggi viewport berubah setiap kali navbar ditampilkan / sembunyikan.

— RedClover

3

Peringatan seluler: menggunakan vh mess dengan Chrome mobile yang tidak memperhitungkan navbar-nya. Kemudian tutup bagian atas halaman Anda dengannya. Masalah serius jika Anda memiliki menu di sana ...

— Offirmo

568

Jika Anda ingin mengatur tinggi dari <div>atau elemen, Anda harus mengatur ketinggian <body>dan <html>100% juga. Maka Anda dapat mengatur ketinggian elemen dengan 100% :)

Berikut ini sebuah contoh:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
sumber

109

Perbaiki saya jika saya salah, Tapi saya pikir Anda juga perlu mengatur ketinggian untuk semua orang tua div, untuk benar-benar bekerja

— Dany Y

Ini tidak akan berfungsi jika saya menggunakan desain berkelanjutan: tinggi halaman 6000px, dengan blok mewakili halaman. Saya ingin satu blok persis ketinggian viewport.

— Qwerty

@DYY, kamu benar. Anda perlu mengatur ketinggian untuk semua orang tua div, dengan implikasi dari segala sesuatu yang memiliki ketinggian layar. Berikut ini sebuah contoh .

— toto_tico

Trik ini berfungsi untuk beberapa kasus tetapi tidak untuk beberapa kasus, Jika Anda mencari kompatibilitas atau cara yang lebih disarankan, Anda dapat melihat @ James's Answer di atas :) Menggunakan Metode Persentase Viewport :), Itu juga harus berfungsi. sorak-sorai

— Ariona Rian

8

@Qwerty, ini solusinya. Set css sebagai begitu: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Jadi jika Anda memiliki 3 bagian, itu akan menjadihtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

Jika Anda dapat benar-benar memposisikan elemen Anda,

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

akan melakukannya.

— Tinister
sumber

16

Ini berfungsi dengan mengeluarkan elemen dari aliran dokumen dan menyemenakan nilai dasarnya ke ketinggian induknya. Ini tidak ideal ketika konten Anda melebihi ketinggian induknya.

— Ricky Boyce

1

Itu tidak berhasil, ketika salah satu orang tuanya disetel position:relativedan tingginya tidak 100% dari viewport. Ini akan menyesuaikan atas dan bawah untuk leluhur relatif atau absolut berikutnya.

— Seika85

141

Anda dapat menggunakan unit view-port di CSS:

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
sumber

1

@Amar Anda harus menggunakan * { box-sizing: border-box; }untuk mencegah hal itu terjadi.

— Luca Steeb

2

Layak memeriksa caniuse untuk dukungan browser pada unit viewport: caniuse.com/#feat=viewport-units

— Dave Everitt

133

Anda dapat menggunakan vhdalam hal ini yang relatif 1% dari ketinggian viewport ...

Itu berarti jika Anda ingin menutupi ketinggian, cukup gunakan 100vh.

Lihatlah gambar di bawah ini yang saya gambar untuk Anda di sini:

Coba cuplikan yang saya buat untuk Anda seperti di bawah ini:

.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>

Luaskan cuplikan

— Alireza
sumber

Memberi 100vh menambahkan gulir vertikal untuk halaman, jadi ikuti yang ini tetapi tidak berhasil. stackoverflow.com/questions/44645465/… . Apakah ada cara untuk menghindari gulungan vertikal dan membiarkan div menyentuh bagian bawah tanpa konten?

— DILEEP THOMAS

@DILEEPTHOMAS mencari yang adapaddings/margins

— Legends

@Lendends pada file root saya mencoba memberi sebagai * {margin: 0, padding: 0} tetapi tidak berhasil

— DILEEP THOMAS

1

@DILEEPTHOMAS lihat contoh ini di sini yang disediakan oleh Alireza, ia juga memiliki bilah gulir karena elemen tubuh memiliki margin. Jika Anda menghapus margin, scrollbar hilang. Mungkin ada penyebab berbeda, tapi yang ini saya mau checkout dulu.

— Legenda

102

Semua solusi lain, termasuk yang terpilih dengan vhsub-optimal kurang optimal jika dibandingkan dengan solusi model fleksibel .

Dengan munculnya model fleksibel CSS , menyelesaikan masalah tinggi 100% menjadi sangat, sangat mudah: digunakan height: 100%; display: flexpada orang tua, dan flex: 1pada elemen anak. Mereka akan secara otomatis mengambil semua ruang yang tersedia di wadah mereka.

Perhatikan betapa sederhananya markup dan CSS. Tidak ada hack tabel atau apa pun.

Model fleksibel didukung oleh semua browser utama dan juga IE11 +.

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>

Luaskan cuplikan

Pelajari lebih lanjut tentang model fleksibel di sini.

— Airen
sumber

3

sebuah kata peringatan: ketika isi dari salah satu kontainer kiri / kanan melebihi tinggi badan asli, wadah yang berlawanan tidak akan diubah ukurannya, sehingga kontainer berakhir dengan ketinggian yang berbeda.

— schellmax

1

Contoh masalah yang ditunjukkan Schellmax: jsfiddle.net/Arete/b4g0o3pq

— Arete

Bergantung pada desainnya, overflow-y: auto;dapat menghindari "wadah melebihi tinggi badan asli".

— Evi Song

54

Anda tidak menyebutkan beberapa detail penting seperti:

Apakah tata letak lebar tetap?
Apakah salah satu atau kedua kolom memiliki lebar tetap?

Inilah satu kemungkinan:

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>

Luaskan cuplikan

Ada banyak variasi dalam hal ini tergantung pada kolom mana yang perlu diperbaiki dan mana yang cair. Anda dapat melakukan ini dengan penentuan posisi absolut juga, tetapi saya biasanya menemukan hasil yang lebih baik (terutama dalam hal cross-browser) menggunakan pelampung.

— cletus
sumber

34

Inilah yang bekerja untuk saya:

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

Luaskan cuplikan

Gunakan position:fixedalih-alih position:absolute, dengan cara itu bahkan jika Anda menggulir ke bawah divisi akan meluas ke ujung layar.

— Majda
sumber

Kode ini dengan "position: [fixed | absolute]" sangat bagus untuk latar belakang sembulan (seperti ketika Anda mengklik untuk memperbesar gambar) tetapi tidak begitu yakin dalam kasus-kasus ketika Anda harus benar-benar menggulir ke bawah. Adonan masih berguna!

— Mannyfatboy

29

Berikut cara untuk ketinggian.

Dalam penggunaan CSS Anda:

#your-object: height: 100vh;

Untuk browser yang tidak mendukung vh-units, gunakan modernizr.

Tambahkan skrip ini (untuk menambah deteksi untuk 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;
});

Akhirnya gunakan fungsi ini untuk menambah ketinggian viewport #your-objectjika browser tidak mendukung vh-units:

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

— Jonas Sandstedt
sumber

24

100% bekerja secara berbeda untuk lebar dan tinggi.

Ketika Anda menentukan width: 100%, itu berarti "mengambil 100% dari lebar yang tersedia dari elemen induk atau lebar jendela."

Ketika Anda menentukan height: 100%, itu hanya berarti "mengambil 100% tinggi yang tersedia dari elemen induk." Ini berarti jika Anda tidak menentukan ketinggian pada elemen tingkat atas, tinggi semua anak akan menjadi 0atau tinggi orangtua, dan itulah sebabnya Anda perlu mengatur elemen paling atas untuk memiliki min-heightketinggian jendela.

Saya selalu menentukan tubuh untuk memiliki ketinggian minimum 100vh dan itu membuat penentuan posisi dan perhitungan mudah,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
sumber

16

Tambahkan min-height: 100%dan jangan tentukan ketinggian (atau letakkan di atas otomatis). Itu benar-benar melakukan pekerjaan untuk saya:

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

— Remus Simion
sumber

16

100vw === 100% dari lebar viewport.

100vh === 100% dari ketinggian viewport.

Jika Anda ingin mengatur divlebar atau tinggi 100% dari ukuran jendela browser Anda harus menggunakan:

Untuk lebar: 100vw

Untuk tinggi: 100vh

Atau jika Anda ingin mengatur ukurannya lebih kecil, gunakan calcfungsi CSS . Contoh:

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

— Руслан
sumber

12

Ada beberapa metode yang tersedia untuk mengatur ketinggian <div>hingga 100%.

Metode (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>

Luaskan cuplikan

Metode (B) menggunakan vh:

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>

Luaskan cuplikan

Metode (c) menggunakan kotak fleksibel:

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>

Luaskan cuplikan

— Santosh Khalse
sumber

12

Ini bekerja untuk saya:

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 */
}

Diambil dari halaman ini .

— pengujian
sumber

12

Cara paling sederhana adalah melakukannya seperti ini.

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

<div></div>

Luaskan cuplikan

— EMILO
sumber

11

Cobalah untuk mengatur height:100%di html&body

html, 
body {
    height: 100%;
}

Dan jika Anda ingin 2 div ketinggian yang sama gunakan atau atur display:flexproperti elemen induk .

— Mohammed Javed
sumber

9

Bahkan dengan semua jawaban di sini, saya terkejut menemukan bahwa tidak ada yang benar-benar menyelesaikan masalah. Jika saya menggunakan 100vh height/ min-height, tata letak rusak ketika konten lebih panjang dari satu halaman. Jika saya menggunakan 100% height/ min-height, tata letak rusak ketika konten kurang dari tinggi halaman.

Solusi yang saya temukan, yang memecahkan kedua kasus, adalah menggabungkan dua jawaban teratas:

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

— machineghost
sumber

1

Saya memiliki navbar tinggi 90px tetap jadi saya hanya harus mengubah "100vh" menjadi "calc (100vh - 90px)"

— Mark Jackson

8

Cukup gunakan unit "vh" alih-alih "px", yang berarti ketinggian view-port.

height: 100vh;

— khalifeh
sumber

7

Elemen blok mengkonsumsi lebar penuh induknya, secara default.

Ini adalah bagaimana mereka memenuhi persyaratan desain mereka, yaitu menumpuk secara vertikal.

9.4.1 Blok konteks pemformatan

Dalam konteks pemformatan blok, kotak diletakkan satu demi satu, secara vertikal, dimulai dari bagian atas blok yang berisi.

Namun, perilaku ini tidak mencakup ketinggian.

Secara default, sebagian besar elemen adalah tinggi konten mereka ( height: auto).

Berbeda dengan lebar, Anda harus menentukan ketinggian jika Anda ingin ruang tambahan.

Karena itu, ingatlah dua hal ini:

kecuali jika Anda ingin lebar penuh, Anda perlu menentukan lebar elemen blok
kecuali jika Anda menginginkan tinggi konten, Anda perlu menentukan tinggi suatu elemen

.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>

Luaskan cuplikan

— Michael Benjamin
sumber

7

Berikut ini adalah sesuatu yang tidak persis seperti apa yang Anda miliki di jawaban sebelumnya, tetapi bisa bermanfaat untuk beberapa orang:

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
sumber

6

Gunakan FlexBox CSS

Flexbox sangat cocok untuk masalah jenis ini. Sementara sebagian besar dikenal untuk meletakkan konten dalam arah horisontal, Flexbox sebenarnya berfungsi dengan baik untuk masalah tata letak vertikal. Yang harus Anda lakukan adalah membungkus bagian vertikal dalam wadah fleksibel dan memilih yang ingin Anda kembangkan. Mereka akan secara otomatis mengambil semua ruang yang tersedia di wadah mereka.

— robross0606
sumber

6

Salah satu opsi adalah menggunakan tabel CSS. Ini memiliki dukungan browser yang hebat dan bahkan berfungsi di Internet Explorer 8.

Contoh JSFiddle

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>

Luaskan cuplikan

— Stiker
sumber

6

Coba ini - diuji:

body {
  min-height: 100%;
}

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

Edit: pembaruan 2020:

Anda dapat menggunakan vhsekarang:

#right, #left {
  height: 100vh
}

— lukaszkups
sumber

5

Anda bisa menggunakan display: flexdanheight: 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>

Luaskan cuplikan

— Thuc Nguyen
sumber

Sudah ada beberapa solusi flexbox diposting, termasuk satu dengan implementasi yang tepat ini diposting hanya 26 hari sebelum jawaban ini.

— TylerH

5

Anda perlu melakukan dua hal, satu adalah mengatur ketinggian hingga 100% yang sudah Anda lakukan. Kedua adalah mengatur posisi ke absolut. Itu harus melakukan trik.

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

Sumber

— Prabhakar Undurthi
sumber

3

Solusi yang ketinggalan jaman. Gunakan vhsebagai gantinya.

— avalanche1

1

Jangan gunakan vhjika Anda berencana untuk menggunakan desain responsif pada perangkat seluler.

— Alexander Kim

5

Coba CSS berikut:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— Anak bermasalah
sumber

5

Sebenarnya yang paling berhasil bagi saya adalah menggunakan vhproperti itu.

Dalam aplikasi Bereaksi saya, saya ingin div untuk mencocokkan halaman tinggi bahkan ketika diubah ukurannya. Saya mencoba height: 100%;, overflow-y: auto;tetapi tidak satupun dari mereka yang bekerja ketika pengaturan height:(your percent)vh;itu berfungsi sebagaimana dimaksud.

Catatan: jika Anda menggunakan bantalan, sudut bundar, dll., Pastikan untuk mengurangi nilai-nilai itu dari vhpersen properti Anda atau menambah tinggi ekstra dan membuat bilah gulir muncul. Ini contoh saya:

.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
sumber

Ngomong-ngomong, Anda menyebutkan 'sudut membulat' yang memengaruhi ketinggian elemen Anda, saya berharap pengaturan box-sizing: border-box;akan mengatasi hal ini, itu berarti bahwa ukuran batas juga diperhitungkan saat menghitung ukuran (lebar dan tinggi) elemen.

— Neek

5

Coba Ini Sekali ...

*{
  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>

Luaskan cuplikan

— Sunil Rajput
sumber

3

Jika Anda menggunakan position: absolute;dan jQuery, Anda bisa menggunakan

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

— John Smith Opsional
sumber

1

Tidak perlu JavaScript. Solusi modern adalah dengan menggunakan model kotak fleksibel CSS .

— Dan Dascalescu

Jika Anda menggunakan JS, saya menemukan ini sangat berguna. CATATAN: sebaiknya menggunakan ini dengan $ (window) .load (), karena Anda akan mendapatkan hasil yang berbeda dengan menggunakan F5 atau CTRL + F5. Periksa tautan ini untuk info lebih lanjut. 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
sumber

1

Kemungkinan salah mengeja: widht(mendekati akhir)

— Peter Mortensen

Cara membuat div 100% tinggi dari jendela browser

Panjang Viewport-Persentase (atau Relatif-Viewport)

Berapa Panjang Viewport-Persentase?

Bagaimana ini bisa digunakan untuk membuat pembagi mengisi ketinggian browser?

HTML

CSS

Browser apa yang mendukung unit-unit baru ini?

Bagaimana ini bisa digunakan dengan banyak kolom?

Bagaimana 100vhbedanya dengan 100%?

HTML

CSS

Bagaimana `100vh`bedanya dengan `100%`?