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.
Ada beberapa CSS 3 unit pengukuran yang disebut:
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).
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:
<div></div>
div {
height: 100vh;
}
Ini adalah benar-benar semua yang's diperlukan. Berikut ini adalah [JSFiddle contoh][2] ini di gunakan.
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.
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
.
100vh
berbeda dengan 100%
?Mengambil tata letak ini misalnya:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
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!
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%;
}
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>
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;
}
Pelajari lebih lanjut tentang flex model berikut ini.
Anda don't menyebutkan beberapa rincian penting seperti:
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
}
<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 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.
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.
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
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'});
}
});
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;
}
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%;
}
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)
}
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.
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>
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;
}
Blok elemen mengkonsumsi lebar penuh dari orang tua mereka, secara default.
Ini adalah bagaimana mereka memenuhi persyaratan desain, yang tersusun secara vertikal.
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:
.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>
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.
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>