Pertanyaan Bagaimana elemen html dapat mengisi 100% dari ketinggian layar yang tersisa, hanya menggunakan css?


Saya memiliki elemen tajuk dan elemen konten:

#header
#content

Saya ingin header tetap tinggi dan konten untuk mengisi semua ketinggian tersisa yang tersedia di layar, dengan overflow-y: scroll;.

Apakah ini mungkin tanpa Javascript? Terima kasih.


75
2017-09-09 06:19


asal


Jawaban:


Trik untuk ini adalah menentukan height: 100%; pada html dan body elemen. Beberapa browser melihat ke elemen induk (html, body) untuk menghitung tinggi.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

64
2017-09-09 06:32



lupakan semua jawaban, baris CSS ini bekerja untuk saya dalam 2 detik:

height:100vh;

1vh = 1% dari tinggi layar browser

sumber

[updated april 2018] sebagaimana disebutkan dalam komentar, pada tahun 2011 ketika pertanyaan diajukan, tidak semua browser mendukung unit viewport. Jawaban lainnya adalah solusi saat itu - vmax masih belum didukung di IE, jadi ini mungkin bukan solusi terbaik untuk semua.


189
2018-04-12 10:30



Sebenarnya pendekatan terbaik adalah ini:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

Ini menyelesaikan segalanya untuk saya dan itu membantu saya untuk mengontrol footer saya dan dapat memiliki footer tetap tidak peduli apakah halaman sedang digulir ke bawah.

Solusi Teknis - DIEDIT

Secara historis, 'tinggi' adalah hal yang rumit untuk dibentuk, dibandingkan dengan 'lebar', yang paling mudah. Sejak css fokus <body> untuk styling untuk bekerja. Kode di atas - kami berikan <html> dan <body> sebuah ketinggian. Di sinilah keajaiban datang ke dalam gambar - karena kita memiliki 'min-height' di meja bermain, kita memberitahu browser itu <body> lebih unggul <html> karena <body> memegang min-height. Ini pada gilirannya, memungkinkan <body> untuk menggantikan <html> karena <html> sudah tinggi sebelumnya. Dengan kata lain, kami menipu browser untuk "bertemu" <html> dari meja, jadi kita bisa bergaya secara mandiri.


31
2018-01-19 01:32



Solusi yang diterima tidak akan benar-benar berfungsi. Anda akan melihat bahwa konten div akan sama dengan tinggi induknya, body. Jadi pengaturan body tinggi ke 100% akan mengaturnya sama dengan ketinggian jendela browser. Katakanlah jendela browser itu 768px tinggi, dengan mengatur konten div tinggi ke 100%, yang divKetinggian pada gilirannya akan menjadi 768px. Dengan demikian, Anda akan berakhir dengan div header menjadi 150px dan div konten 768px. Pada akhirnya Anda akan memiliki konten 150px di bawah bagian bawah halaman. Untuk solusi lain, periksa Link ini.


7
2017-09-20 15:14



Dengan HTML5 Anda dapat melakukan ini:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

4
2018-04-21 15:53



Bagi saya, selanjutnya bekerja dengan baik:

Saya membungkus header dan konten pada div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

Saya menggunakan ini referensi untuk mengisi ketinggian dengan flexbox. CSS berjalan seperti ini:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

Untuk info lebih lanjut tentang teknik flexbox, kunjungi referensi


2
2017-07-20 13:09



Anda juga dapat mengatur orang tua ke display: inline. Lihat http://codepen.io/tommymarshall/pen/cECyH

Pastikan juga memiliki tinggi html dan set tubuh hingga 100% juga.


1
2018-05-05 18:22



Dalam hal ini saya ingin div konten utama saya menjadi ketinggian cairan sehingga seluruh halaman membutuhkan 100% dari ketinggian browser.

height: 100vh;


1
2018-05-18 06:02



Kecuali Anda perlu mendukung IE 9 dan di bawah, saya akan menggunakan flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

Anda juga perlu mendapatkan tubuh untuk mengisi seluruh halaman

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

0
2018-05-31 15:25



CSS PLaY | browser silang tetap header / footer / centered tata letak kolom tunggal

Bingkai CSS, versi 2: Contoh 2, lebar yang ditentukan | 456 Berea Street

Satu hal penting adalah bahwa meskipun ini terdengar mudah, akan ada sedikit kode jelek masuk ke file CSS Anda untuk mendapatkan efek seperti ini. Sayangnya, ini adalah satu-satunya pilihan.


0
2017-09-09 06:25



Jawaban yang diterima tidak berfungsi. Dan jawaban suara tertinggi tidak menjawab pertanyaan yang sebenarnya. Dengan header tinggi piksel tetap, dan pengisi di tampilan browser yang tersisa, dan gulir untuk owerflow. Berikut ini adalah solusi yang benar-benar berfungsi, menggunakan penentuan posisi absolut. Saya juga berasumsi bahwa ketinggian header diketahui, dengan suara "header tetap" dalam pertanyaan. Saya menggunakan 150px sebagai contoh di sini:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS: (menambahkan warna latar belakang untuk efek visual saja)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

Untuk tampilan yang lebih mendetail bagaimana ini berfungsi, dengan konten sebenarnya di dalam #Content, Lihatlah ini jsfiddle, menggunakan baris dan kolom bootstrap.


0
2018-01-04 10:34