Pertanyaan Bagaimana cara membuat tinggi div 100% dari jendela browser?


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

Hak div memiliki warna abu-abu background-color, dan saya perlu memperluas secara vertikal tergantung pada ketinggian jendela browser pengguna. Sekarang ini background-color berakhir di bagian terakhir konten di dalamnya div.

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


1681
2017-10-15 21:18


asal


Jawaban:


Ada beberapa unit pengukuran CSS3 yang disebut:

Persentase-Tampilan-Terlihat (atau Relatif-Tampilan) Panjangnya

Berapa Panjang Persentase-Pelajaran?

Dari Rekomendasi Kandidat W3 terkait di atas:

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

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

Bagaimana ini bisa digunakan untuk membuat pembatas mengisi ketinggian browser?

Untuk pertanyaan ini, kita bisa memanfaatkannya vh: 1vh sama dengan 1% dari ketinggian viewport. Artinya, 100vh sama dengan tinggi jendela browser, di mana pun letak elemen di dalam pohon DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Ini benar-benar semua yang dibutuhkan. Ini dia Contoh JSFiddle ini digunakan.

Browser apa yang mendukung unit-unit baru ini?

Ini saat ini didukung di semua browser utama terbaru selain Opera Mini. Periksa Bisakah saya menggunakan ... untuk dukungan lebih lanjut.

Bagaimana ini bisa digunakan dengan banyak kolom?

Dalam kasus pertanyaan di tangan, menampilkan pembagi kiri dan kanan, di sini adalah a Contoh JSFiddle menunjukkan tata letak dua kolom yang melibatkan keduanya vh dan vw.

Bagaimana 100vh berbeda 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>

Itu p tag di sini diatur ke tinggi 100%, tetapi karena mengandung div memiliki tinggi 200px, 100% dari 200px menjadi 200px, tidak 100% dari body tinggi. Menggunakan 100vh sebaliknya berarti bahwa p tag akan menjadi tinggi 100% dari body terlepas dari itu div tinggi. Lihatlah ini mendampingi JSFiddle untuk dengan mudah melihat perbedaannya!


2364
2018-05-30 13:33



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

Berikut ini contohnya:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Jika Anda dapat benar-benar memposisikan elemen Anda,

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

akan melakukannya.


242
2017-10-15 21:31



Anda dapat menggunakan unit view-port dalam 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*/
}

127
2018-05-04 11:11



Semua solusi lainnya, termasuk yang teratas dengan yang terpilih vh sub-optimal bila dibandingkan dengan model lentur larutan.

Dengan munculnya Model flex CSS, memecahkan masalah tinggi 100% menjadi sangat, sangat mudah: gunakan height: 100%; display: flexpada orang tua, dan flex: 1 pada elemen anak. Mereka akan secara otomatis mengambil semua ruang yang tersedia di wadahnya.

Perhatikan betapa sederhananya markup dan CSS. Tidak ada peretasan meja atau apa pun.

Model lentur adalah didukung oleh semua browser utama serta 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>

Pelajari lebih lanjut tentang model lentur sini.


85
2018-06-12 14:14



Anda tidak menyebutkan beberapa detail penting seperti:

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

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

Ada banyak variasi tergantung pada kolom mana yang harus diperbaiki dan mana yang cair. Anda dapat melakukan ini dengan posisi absolut juga tetapi saya biasanya menemukan hasil yang lebih baik (terutama dalam hal peramban silang) menggunakan pelampung sebagai gantinya.


47
2017-10-15 23:13



Kamu dapat memakai vh dalam hal ini yang relatif terhadap 1% dari tinggi dari viewport.

Itu artinya jika Anda ingin menutupi ketinggian, gunakan saja 100vh.

Lihatlah gambar yang saya gambar untuk Anda di sini:

How to make a div 100% height of the browser window?

Coba potongan yang saya buat untuk Anda sebagai berikut:

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


40
2018-06-03 17:43



Ini perbaikan untuk ketinggian.

Dalam penggunaan CSS Anda:

#your-object: height: 100vh;

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

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

Terakhir, gunakan fungsi ini untuk menambah ketinggian viewport ke #your-object jika browser tidak mendukung vh-units:

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

25
2017-08-21 16:57



Inilah yang berhasil untuk saya:

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

Menggunakan position:fixed dari pada position:absolute, seperti itu bahkan jika Anda menggulir ke bawah divisi akan meluas ke ujung layar.


24
2017-07-27 16:18



Menambahkan min-height: 100% dan jangan menentukan ketinggian (atau menaruhnya di mobil). Itu benar-benar melakukan pekerjaan untuk saya:

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

14
2017-12-10 21:34



Ini berhasil untuk saya:

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

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

Diambil dari halaman ini.


11
2018-06-12 14:01