CSS Div meregangkan 100% tinggi halaman

195

Saya memiliki bilah navigasi di sisi kiri halaman saya, dan saya ingin membentang hingga 100% dari tinggi halaman. Bukan hanya ketinggian viewport, tetapi termasuk area yang disembunyikan sampai Anda menggulir. Saya tidak ingin menggunakan javascript untuk mencapai ini.

Bisakah itu dilakukan dalam HTML / CSS?

css height max stretch Tom
sumber

Jawaban:

171

Inilah solusi yang akhirnya saya temukan ketika menggunakan div sebagai wadah untuk latar belakang yang dinamis.

  • Hapus z-indexuntuk penggunaan non-latar belakang.
  • Hapus leftatau rightuntuk kolom tinggi penuh.
  • Hapus topatau bottomuntuk baris lebar penuh.

EDIT 1: CSS di bawah ini telah diedit karena tidak ditampilkan dengan benar di FF dan Chrome. dipindahkan position:relativeke HTML dan atur isi height:100%bukan min-height:100%.

EDIT 2: Menambahkan komentar ekstra ke CSS. Menambahkan beberapa instruksi di atas.

CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

Html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

Mengapa?

html{min-height:100%;position:relative;}

Tanpa ini, DIV cloud-container dihapus dari konteks tata letak HTML. position: relativememastikan bahwa DIV tetap berada di dalam kotak HTML saat digambar sehingga bottom:0merujuk ke bagian bawah kotak HTML. Anda juga dapat menggunakan height:100%cloud-container karena sekarang mengacu pada ketinggian tag HTML dan bukan viewport.

Knyri
sumber
ini bagus, tetapi tidak akan pusat. ada perbaikan untuk itu? margin: 0 otomatis; tidak bekerja
cream
Jawaban yang luar biasa. Saya perhatikan bahwa Anda harus menggunakan min-height (dan bukan hanya tinggi) pada htmlelemen. Mengapa demikian?
HartleySan
Menggunakan heightmengatakan 'kamu setinggi ini; tidak lebih dan tidak kurang. ' Yang berarti ketinggian viewport. Kami ingin setidaknya setinggi viewport atau lebih tinggi. min-heightmelakukan ini dengan baik.
Knyri
1
Indeks-z ada di sana karena ini adalah cuplikan untuk latar belakang bergerak yang saya lakukan dan saya ingin memastikan div tetap di latar belakang. Ini tidak diperlukan untuk elemen normal.
Knyri
5
Ini luar biasa. Saya telah melakukan CSS selama 15 tahun dan tidak pernah mengklik bahwa memposisikan ke <html>dan memposisikan ke viewport adalah dua hal yang terpisah. Terima kasih!
Ben Hull
80

Dengan HTML5, cara termudah adalah melakukannya height: 100vh. Di mana 'vh' berarti ketinggian viewport dari jendela browser. Responsif terhadap pengubahan ukuran browser dan perangkat seluler.

alchuang
sumber
39
Hilang intinya sepenuhnya. OP meminta ketinggian halaman, bukan ketinggian jendela / viewport.
Greg
9
Tinggi dokumen, bukan tinggi viewport.
punkbit
7
komentar yang sama seperti di atas
ericn
11
Saya buru-buru salah membaca pertanyaan dan menemukan jawaban ini berguna. Terima kasih telah membuat kesalahan yang sama dengan yang saya lakukan, tetapi sekarang saya ingin menyarankan jawaban ini diubah untuk memasukkan peringatan itu.
durette
Ngomong-ngomong, saya mencarinya, ada juga vw.
Aaron Franke
14

Saya memiliki masalah serupa dan solusinya adalah melakukan ini:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

Saya menginginkan div yang berpusat pada halaman dengan tinggi 100% dari tinggi halaman, jadi solusi total saya adalah:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

Anda mungkin perlu membuat elemen induk (atau hanya 'tubuh') miliki position: relative;

Nate Barr
sumber
16
Mengapa semua orang menyebutnya sebagai cloud-container?
Wilf
Ini bagus! Mengabaikan memperbaiki ketinggian adalah ide yang brilian sebenarnya dan saya belum melihat ada bug dengan itu. Suka. KISS! Terima kasih untuk tip man!
daneczech
13

Anda dapat curang menggunakan Kolom Faux Atau Anda dapat menggunakan beberapa tipuan CSS

Ryan Doherty
sumber
1
Perhatikan bahwa tipuan css akan memberi Anda kolom tinggi yang sama, tetapi tidak 100% kolom tinggi.
thedz
Jika bilah nav meluas ke ketinggian konten, yang menentukan tinggi halaman, itu akan memberi Anda 100% tinggi.
Ryan Doherty
1
-1 karena tidak memberikan cara aman 100% untuk memastikan nav bar selalu cukup tinggi.
Aaron Digulla
dead link: ((((
JBis
9

Sederhana menggunakan tabel:

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

Ketika DIV diperkenalkan, orang-orang begitu takut dengan meja sehingga DIV yang malang menjadi palu metaforis.

Aaron Digulla
sumber
6
Sementara DIV dan gaya fluida sangat bagus, saya pikir CSS masih gagal menangkap esensi tata letak layar dengan cara yang sama seperti TABEL mencapai esensi tata letak tabel. ... Dan tata letak tabel masih merupakan cara yang dapat diterima untuk melakukan sesuatu.
Jeff Meatball Yang
8
Tabel dimaksudkan untuk data tabular, bukan tata letak halaman. Yang sedang berkata, CSS memiliki beberapa kelemahan utama ketika datang ke pertanyaan tinggi 100% kuno. Saya harus mengakui bahwa saya telah menggunakan solusi ini ketika pada tenggat waktu yang ketat, tetapi selalu terasa seperti saya menyerah.
Scott Greenfield
6
@Scott: Saya pernah menghabiskan tiga minggu mencoba mendapatkan desain tinggi 100% tepat di tiga browser utama. Aku benar-benar tidak bisa mendengar omong kosong "tabel itu jahat" lagi :-( Bahkan dengan sepengetahuanku, menggunakan DIV terlalu rumit.
Aaron Digulla
1
Perencanaan yang tepat memastikan bahwa tidak perlu bergantung pada tabel. Sekarang di 2012, dengan industri secara keseluruhan mendorong masa lalu IE6 / 7, saya sangat menyarankan agar tidak menggunakan tabel untuk tinggi 100%!
Vael Victus
4
Anda tidak harus menggunakan <tabel>, Anda bisa menggunakan <div style = "display: table;" : D
Wilf
8

Gunakan posisi absolut. Perhatikan bahwa ini bukan cara yang biasanya kita gunakan untuk menggunakan posisi absolut yang mengharuskan penataan secara manual atau dialog apung. Ini akan secara otomatis meregang ketika Anda mengubah ukuran jendela atau konten. Saya percaya bahwa ini memerlukan mode standar tetapi akan bekerja di IE6 dan di atasnya.

Cukup ganti div dengan id 'konten' dengan konten Anda (ketinggian yang ditentukan hanya untuk ilustrasi, Anda tidak harus menentukan ketinggian pada konten yang sebenarnya.

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

Cara kerjanya adalah div luar berfungsi sebagai titik referensi untuk bilah nav. Div luar ditarik oleh konten dari div 'konten'. Bilah nav menggunakan penentuan posisi absolut untuk merentangkan dirinya ke ketinggian induknya. Untuk perataan horizontal, kami membuat div konten mengimbangi dirinya sendiri dengan lebar yang sama dari navbar.

Ini dibuat lebih mudah dengan model kotak fleksibel CSS3, tetapi itu belum tersedia di IE dan memiliki beberapa kebiasaan itu sendiri.

tstanis
sumber
Hai tstanis, saya diuji pada IE6 dan navbar tidak meregang . Di FireFox, Chrome tidak bekerja dengan baik.
Lucas Pottersky
Pada IE6, gunakan tabel atau JavaScript atau switch browser kecuali Anda telah melakukan ini selusin kali sebelumnya.
Aaron Digulla
6

Saya mengalami masalah yang sama seperti Anda. Saya ingin menjadikan DIVsebagai latar belakang, mengapa, karena mudah untuk memanipulasi div melalui javascript. Bagaimanapun tiga hal yang saya lakukan di css untuk div itu.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
Talha
sumber
6

Jika Anda menargetkan lebih banyak browser modern, hidup bisa sangat sederhana. mencoba:

.elem{    
    height: 100vh;
 }

jika Anda membutuhkannya di 50% dari halaman, ganti 100 dengan 50.

Adam Boostani
sumber
3
Ini mengasumsikan bahwa tinggi halaman sama dengan tinggi layar. Halaman sering kali bisa jauh lebih panjang dari ketinggian layar, oleh karena itu mengapa kita gulir ke bawah.
TidyDev
5

Saya ingin menutup seluruh halaman web sebelum meminta popup modal. Saya mencoba banyak metode menggunakan CSS dan Javascript tetapi tidak satupun yang membantu sampai saya menemukan solusi berikut. Ini bekerja untuk saya, saya harap ini membantu Anda juga.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
			    margin: 0px 0px;
			    height 100%;
			}
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
		</style>
		<script>
		
			// Polling for the sake of my intern tests
			var interval = setInterval(function() {
				if(document.readyState === 'complete') {
					clearInterval(interval);
					isReady();
				}    
			}, 1000);
			
			function isReady() {
				document.getElementById('btn1').disabled = false;
				document.getElementById('btn2').disabled = false;
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			}
			
			function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
				
				// enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
		</script>
		
	</head>
	<body id="body">
		<div id="div1" class="full-page">
			<div class="avoid-content-highlight">
                
            </div>
		</div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
		<div id="demo">
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
		</div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
	</body>
</html>
Luaskan cuplikan

Semoga berhasil ;-)

Chong Chern Dong
sumber
2 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
Swadesh Behera
sumber
1 

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>
Luaskan cuplikan

reaw_ni
sumber
tolong tambahkan beberapa penjelasan untuk jawaban Anda, tunjukkan apa yang dilakukannya dan bagaimana cara memecahkan masalah
Our Man in Pisang
div "halaman" tinggi 100% platform apa pun. cukup salin skrip js ke tag <script> </script> dan tempel ke kode HTML.
reaw_ni
0

Sederhana, cukup bungkus dalam tabel ...

HTML:

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS:

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>
Steffan Perry
sumber