Cara membuat div 100% ketinggian jendela browser

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

Yang tepat div memiliki abu-abu background-color, dan saya perlu untuk memperluas secara vertikal tergantung pada ketinggian dari pengguna's jendela browser. Sekarang background-color berakhir di bagian terakhir dari konten yang div.

I've mencoba height:100%, min-height:100%;, dll.

Peter Mortensen
Pertanyaan edit 8 Juli 2019 в 11:32
Pemrograman
html css height
15 Oktober 2009 в 9:18
75 tayangan
Mengomentari pertanyaan (4)

Ada beberapa CSS 3 unit pengukuran yang disebut:

Viewport-Persentase (atau Viewport-Relatif) Panjang

Apa Pandang-Persentase Panjang?

Dari linked W3 Calon Rekomendasi di atas:

viewport-persentase panjang relatif terhadap ukuran awal mengandung blok. Ketika tinggi atau lebar dari awal mengandung blok berubah, mereka adalah skala yang sesuai.

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

Bagaimana hal ini dapat digunakan untuk membuat sebuah pembagi mengisi ketinggian browser?

Untuk pertanyaan ini, kita dapat menggunakan vh: 1vh adalah sama dengan 1% dari viewport's tinggi. Itu adalah untuk mengatakan, 100vh adalah sama dengan ketinggian dari jendela browser, terlepas dari di mana unsur yang terletak dalam DOM tree:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Ini adalah benar-benar semua yang's diperlukan. Berikut ini adalah [JSFiddle contoh][2] ini di gunakan.

Apa browser mendukung unit-unit baru?

Ini adalah saat ini didukung pada semua up-to-date utama browser selain Opera Mini. Check out yang Bisa saya gunakan... untuk dukungan lebih lanjut.

Bagaimana hal ini dapat digunakan dengan beberapa kolom?

Dalam kasus pertanyaan di tangan, menampilkan kiri dan kanan pembagi, berikut adalah [JSFiddle contoh][4] menampilkan dua kolom layout yang melibatkan kedua vh dan vw.

Bagaimana 100vh berbeda dengan 100%?

Mengambil tata letak ini misalnya:


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

P tag berikut ini di set ke 100% tinggi, tetapi karena mengandung div memiliki 200 piksel tinggi, 100% 200 piksel menjadi 200 piksel, tidak 100% dari tubuh tinggi. Menggunakan 100vh bukan berarti p tag akan 100% ketinggian tubuh terlepas dari div tinggi. Lihatlah ini [menyertai JSFiddle][5] untuk dengan mudah melihat perbedaan!

Komentar (17)

Jika anda ingin mengatur ketinggian <div> atau unsur apapun, anda harus mengatur ketinggian <body> dan <html> 100% juga. Kemudian anda dapat mengatur ketinggian elemen dengan 100% :)

Berikut ini sebuah contoh:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
Komentar (5)

Jika anda mampu untuk benar-benar posisi elemen anda,

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

akan melakukannya.

Komentar (2)

Anda dapat menggunakan view-port satuan 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 */
}
Komentar (2)

Anda dapat menggunakan vh dalam hal ini yang relatif ke 1% dari ketinggian viewport...

Itu berarti jika anda ingin untuk menutupi off yang tinggi, hanya menggunakan 100vh.

Terlihat pada gambar di bawah ini saya menarik untuk anda berikut ini:

Mencoba cuplikan 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>
Alireza
Jawaban edit 17 September 2019 в 8:20
Komentar (0)

Semua solusi lainnya, termasuk top-sebagai salah satu dengan vh sub-optimal bila dibandingkan dengan flex model solusi.

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

Perhatikan cara sederhana markup dan CSS. Tidak ada meja hacks atau apa pun.

Flex model didukung oleh semua browser utama serta IE11+.

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
waktu
benar

Pelajari lebih lanjut tentang flex model berikut ini.

Komentar (3)

Anda don't menyebutkan beberapa rincian penting seperti:

  • Tata letak fixed width?
  • Apakah salah satu atau kedua kolom fixed width?

Berikut ini's salah 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 
}


  Example



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

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

Ada banyak variasi ini tergantung pada kolom mana yang perlu diperbaiki dan yang cair. Anda dapat melakukan ini dengan posisi mutlak juga, tapi saya've umumnya ditemukan hasil yang lebih baik (terutama dalam hal cross-browser) menggunakan mengapung sebagai gantinya.

Komentar (0)

Ini adalah apa yang bekerja untuk saya:

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

Gunakan posisi:tetap bukan posisi:absolut, yang cara bahkan jika anda gulir ke bawah divisi akan memperluas ke ujung layar.

Komentar (0)

Berikut ini's untuk memperbaiki tinggi.

Di CSS anda gunakan:

#your-object: height: 100vh;

Untuk browser yang don't dukungan vh-unit, menggunakan modernizr.

Tambahkan script ini (untuk menambahkan deteksi untuk vh-unit)

// 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 menggunakan fungsi ini untuk menambahkan tinggi viewport untuk #anda-objek jika browser doesn't dukungan vh-unit:

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

100% bekerja dengan cara yang berbeda untuk lebar dan tinggi.

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

Ketika anda menentukan height: 100%, itu hanya berarti "mengambil 100% dari tinggi tersedia dari elemen induk." Ini berarti jika anda don't menentukan ketinggian di atas tingkat elemen, ketinggian dari semua anak-anak akan menjadi baik 0 atau tinggi dari orang tua, dan itulah mengapa anda perlu untuk mengatur elemen paling atas untuk memiliki min-height dari jendela tinggi.

Saya selalu menentukan tubuh untuk memiliki min-height 100vh dan itu membuat posisi dan perhitungan yang mudah,

body {
  min-height: 100vh;
}
Komentar (0)

Tambahkan min-height: 100% dan don't menentukan ketinggian (atau meletakkannya di auto). Itu benar-benar melakukan pekerjaan untuk saya:

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

100vw === 100% dari lebar viewport.

100vh === 100% dari ketinggian viewport.

Jika anda ingin mengatur div lebar atau tinggi 100% dari browser-jendela-ukuran harus anda gunakan:

Untuk lebar: 100vw

Untuk ketinggian: 100vh

Atau jika anda ingin mengatur ukuran yang lebih kecil, gunakan CSS calc fungsi. Contoh:

#example {
    width: calc(100vw - 32px)
}
Peter Mortensen
Jawaban edit 8 Juli 2019 в 11:38
Komentar (0)

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.

Peter Mortensen
Jawaban edit 8 Juli 2019 в 11:40
Komentar (0)

Ada beberapa metode yang tersedia untuk pengaturan ketinggian <div> 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>

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>

Metode (c) menggunakan flex box:

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>
Komentar (0)

Cobalah untuk mengatur height:100% di html & tubuh 

html, 
body {
    height: 100%;
}

Dan jika anda ingin 2 div ketinggian sama, menggunakan atau mengatur elemen induk display:flex properti.

Komentar (0)

Hanya gunakan "vh" unit bukan "px", yang berarti melihat-port tinggi. 

height: 100vh;
Peter Mortensen
Jawaban edit 8 Juli 2019 в 11:40
Komentar (0)

Di sini adalah sesuatu yang tidak persis seperti apa yang anda miliki dalam jawaban sebelumnya, tetapi hal ini dapat membantu untuk beberapa:

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/

Peter Mortensen
Jawaban edit 8 Juli 2019 в 11:52
Komentar (0)

Blok elemen mengkonsumsi lebar penuh dari orang tua mereka, secara default.

Ini adalah bagaimana mereka memenuhi persyaratan desain, yang tersusun secara vertikal.

9.4.1 Block format konteks

Di blok format konteks, kotak diletakkan satu setelah yang lain, vertikal, dimulai pada bagian atas yang berisi blok.

Perilaku ini, namun, tidak meluas ke tinggi.

Secara default, kebanyakan unsur ketinggian konten mereka (height: auto).

Tidak seperti dengan lebar, anda perlu menentukan ketinggian jika anda ingin ruang ekstra.

Oleh karena itu, menjaga dua hal dalam pikiran:

  • kecuali jika anda ingin lebar penuh, anda perlu menetapkan lebar dari elemen blok
  • kecuali jika anda ingin tinggi konten, anda perlu untuk menentukan tinggi dari 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">

  </section>
</div>
Komentar (0)

Penggunaan FlexBox CSS

Flexbox sangat cocok untuk jenis masalah ini. Sementara sebagian besar dikenal untuk meletakkan konten dalam arah horisontal, Flexbox benar-benar bekerja sama dengan baik untuk tata letak vertikal masalah. Semua yang harus anda lakukan adalah membungkus bagian vertikal dalam wadah flex dan memilih mana yang anda inginkan untuk memperluas. Mereka akan secara otomatis mengambil semua ruang yang tersedia di wadah mereka.

Komentar (0)

Salah satu pilihan adalah menggunakan CSS meja. Ini memiliki besar browser mendukung dan bahkan bekerja di Internet Explorer 8.

[JSFiddle Contoh][1]

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>
Peter Mortensen
Jawaban edit 8 Juli 2019 в 11:41
Komentar (0)