Bagaimana elemen html mengisi 100% tinggi layar yang tersisa, hanya menggunakan css?

118

Saya memiliki elemen header dan elemen konten:

#header
#content

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

Apakah ini mungkin tanpa Javascript?

html  css 
— Harry
sumber

Jawaban:

83

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

<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;
}
— BentOnCoding
sumber
1
Saya mencoba semua solusi tetapi hanya ini yang menyelesaikan masalah saya.
— Alex
1
@Alex jika ini berfungsi untuk semua browser yang Anda targetkan, maka silakan dan terapkan. Persyaratan setiap orang berbeda.
— BentOnCoding
321

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

height:100vh;

1vh = 1% dari tinggi layar browser

sumber

Untuk penskalaan tata letak responsif, Anda mungkin ingin menggunakan:

min-height: 100vh

[update november 2018] Seperti yang disebutkan di komentar, menggunakan min-height dapat menghindari masalah pada desain yang reponif

[update april 2018] Seperti yang disebutkan di komentar, pada tahun 2011 ketika pertanyaan diajukan, tidak semua browser mendukung unit viewport. Jawaban lainnya adalah solusi saat itu - vmaxmasih belum didukung di IE, jadi ini mungkin belum menjadi solusi terbaik untuk semua.

— Sebastien H.
sumber
9
Ini adalah jawaban paling sederhana, karena Anda tidak perlu menyetel tinggi semua elemen induk menjadi 100%. Berikut arus dukungan untuk vh - caniuse.com/#feat=viewport-units - iOS tampaknya mungkin perlu solusi, sebagai "vh di iOS dilaporkan meliputi ketinggian toolbar bawah dalam perhitungan tinggi".
— Brian Burns
2
WOW, temuan bagus! Lihatlah semua orang ini dengan jawaban yang terlalu rumit.
— NoName
8
Saat pertanyaan diajukan pada tahun 2011, tidak ada browser utama yang mendukung unit viewport. "Jawaban yang terlalu rumit" itu adalah satu-satunya pilihan saat itu.
— JJJ
6
Saran kecil bahwa a min-height: 100vhakan jauh lebih baik. Ini akan menyesuaikan skala untuk desain responsif juga.
— Wiggy A.
3
Ini tidak menjawab pertanyaan yang diajukan, ini akan mengambil 100% viewport. Dia tidak menginginkan ini karena headernya akan mengambil x% dari viewport, karena jawaban lain benar.
— 4cody
35

Sebenarnya pendekatan terbaik adalah ini:

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

Ini menyelesaikan segalanya untuk saya dan membantu saya mengontrol footer saya dan dapat memiliki footer tetap tidak masalah jika halaman sedang di-scroll ke bawah.

Solusi Teknis - DIEDIT

Secara historis, 'tinggi' adalah hal yang paling sulit untuk dibentuk, dibandingkan dengan 'lebar', yang paling mudah. Karena css fokus pada <body>styling agar bekerja. Kode di atas - kami memberi <html>dan <body>tinggi. Di sinilah keajaiban muncul - karena kami memiliki 'min-height' di meja bermain, kami memberi tahu browser yang <body>lebih unggul <html>karena <body>memegang min-height. Ini pada gilirannya, memungkinkan <body>untuk menimpa <html>karena <html>ketinggian sudah lebih awal. Dengan kata lain, kami menipu browser untuk " <html>menggeser " tabel, sehingga kami dapat mengatur gaya sendiri.

— Faron
sumber
1
Ya Tuhan, ini keajaiban!
— Geoff
Seperti keajaiban, itu berhasil! Tapi tolong: mengapa min-heightdan height?
— Joy
1
@ShaojiangCai - Secara historis, 'tinggi' adalah hal yang paling sulit untuk dibentuk, dibandingkan dengan 'lebar', yang paling mudah. Karena css fokus pada <body>styling agar bekerja. Kode ini: kami memberi <html>dan <body>tinggi. Di sinilah keajaiban muncul - karena kami memiliki 'min-height' di meja bermain, kami memberi tahu server yang <body>lebih unggul <html>karena <body>memegang min-height. Ini pada gilirannya, memungkinkan <body>untuk menimpa <html>karena <html>ketinggian sudah lebih awal. Dengan kata lain, kami menipu server untuk " <html>menggeser " tabel, sehingga kami dapat mengatur gaya secara mandiri.
— Faron
2
@Faron Sepertinya 'browser' akan menjadi pilihan kata yang lebih baik di sini daripada 'server'. ;)
— LETs
@EunLeem ... Saya setuju dengan Anda tentang bagaimana saya bisa memilih kata-kata yang tepat untuk mengatasi ini. Terima kasih atas tip "siku-benturan". Memperbarui jawaban saya.
— Faron
14

Anda dapat menggunakan vh pada properti min-height.

min-height: 100vh;

Anda dapat melakukan hal berikut, tergantung bagaimana Anda menggunakan margin ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
— Almeida Cavalcante
sumber
10

Solusi yang diterima tidak akan benar-benar berfungsi. Anda akan melihat bahwa isinya divakan sama dengan tinggi induknya body,. Jadi mengatur bodytinggi menjadi 100%akan mengaturnya sama dengan tinggi jendela browser. Misalkan jendela browser 768pxtingginya, dengan menyetel divtinggi konten menjadi 100%, divtinggi itu pada gilirannya akan menjadi 768px. Dengan demikian, Anda akan mendapatkan div header 150pxdan div konten 768px. Pada akhirnya Anda akan memiliki konten di 150pxbawah bagian bawah halaman. Untuk solusi lain, lihat tautan ini.

— dykstrad.dll
sumber
8

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>
— Miguel
sumber
Hati-hati menggunakan kalk pada persentase tinggi. Firefox tidak akan berfungsi dengan benar kecuali semua orang tua memiliki ketinggian yang ditetapkan.
— TomDK
4

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 referensi ini 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 referensinya

— penggiling daging
sumber
1

Jawaban yang diterima tidak berhasil. Dan jawaban pilihan tertinggi tidak menjawab pertanyaan sebenarnya. Dengan header tinggi piksel tetap, dan pengisi di sisa tampilan browser, dan gulir untuk owerflow. Berikut adalah solusi yang benar-benar berfungsi, menggunakan pemosisian absolut. Saya juga berasumsi bahwa tinggi 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 melihat lebih detail bagaimana ini bekerja, dengan konten aktual di dalam #Content, lihat jsfiddle ini , menggunakan baris dan kolom bootstrap.

— jumps4fun
sumber
"header tinggi piksel tetap" -> ini tepatnya! The bottomproperti memastikan bahwa #Contenttetap terjebak di akhir halaman. Saya menghargai Anda meluangkan waktu untuk menjelaskannya.
— Armfoot
1
Dan saya senang ini membantu seseorang;)
— jumps4fun
1

Dalam contoh ini saya ingin div konten utama saya menjadi tinggi cair sehingga seluruh halaman menempati 100% dari tinggi browser.

height: 100vh;

— Fezal halai
sumber
1

Izinkan saya menambahkan 5 sen saya di sini dan menawarkan solusi klasik:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
Luaskan cuplikan

Ini akan bekerja di semua browser, tanpa skrip, tanpa flex. Buka cuplikan dalam mode halaman penuh dan ubah ukuran browser: proporsi yang diinginkan dipertahankan bahkan dalam mode layar penuh.

catatan:

  • Elemen dengan warna latar yang berbeda sebenarnya dapat menutupi satu sama lain. Di sini saya menggunakan batas padat untuk memastikan bahwa elemen ditempatkan dengan benar.
  • idHeader.heightdan idContent.topdisesuaikan untuk menyertakan border, dan harus memiliki nilai yang sama jika border tidak digunakan. Jika tidak, elemen akan ditarik keluar dari viewport, karena lebar yang dihitung tidak menyertakan batas, margin, dan / atau padding.
  • left:0; right:0;dapat diganti dengan width:100%alasan yang sama, jika tidak ada batas yang digunakan.
  • Pengujian di halaman terpisah (bukan sebagai cuplikan) tidak memerlukan penyesuaian html / body.
  • Di IE6 dan versi sebelumnya kita harus menambahkan padding-topdan / atau padding-bottomatribut ke #idOuterelemen.

Untuk melengkapi jawaban saya, berikut adalah tata letak footer:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
Luaskan cuplikan

Dan inilah tata letak dengan header dan footer:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
Luaskan cuplikan

— Dmitry Babich
sumber
0

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

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

Anda juga perlu membuat badan mengisi seluruh halaman

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
— James Lambert
sumber
0 
#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
— Jazib Khan
sumber
-1

Solusi terbaik yang saya temukan sejauh ini adalah mengatur elemen footer di bagian bawah halaman dan kemudian mengevaluasi perbedaan offset footer dan elemen yang perlu kami perluas. misalnya

File html

<div id="contents"></div>
<div id="footer"></div>

File css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

File js (menggunakan jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

Anda mungkin juga ingin memperbarui tinggi elemen konten pada setiap perubahan ukuran jendela, jadi ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
— Αλέκος
sumber
-1

Sangat sederhana:

#content {
    max-height: 100%;
}
— Masood
sumber
-3

Sudahkah Anda mencoba sesuatu seperti ini?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>
— Rahul Choudhary
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.