100% Tinggi Min layout CSS

Apa cara terbaik untuk membuat elemen dengan tinggi minimum 100% di berbagai browser?

Khususnya jika Anda memiliki tata letak dengan headerdan footerfixed height,

bagaimana Anda membuat bagian konten menengah mengisi 100%ruang di antara dengan footertetap ke bawah?

Saya menggunakan yang berikut ini: Layout CSS - tinggi 100%

Tinggi Min

Elemen #container halaman ini memiliki tinggi minimum 100%. Dengan begitu, jika konten membutuhkan ketinggian lebih dari yang disediakan viewport, ketinggian #content memaksa #container menjadi lebih panjang juga. Kolom yang mungkin di #content kemudian dapat divisualisasikan dengan gambar latar belakang di #container; div bukan sel tabel, dan Anda tidak perlu (atau ingin) elemen fisik untuk membuat efek visual seperti itu. Jika Anda belum yakin; pikirkan garis dan gradien goyah alih-alih garis lurus dan skema warna sederhana.

Posisi relatif

Karena #container memiliki posisi relatif, #footer akan selalu berada di dasarnya; karena ketinggian minimum yang disebutkan di atas tidak mencegah penskalaan #container, ini akan berfungsi bahkan jika (atau lebih tepatnya ketika #content memaksa #container menjadi lebih panjang.

Padding-bottom

Karena tidak lagi dalam aliran normal, padding-bottom dari #content sekarang menyediakan ruang untuk #footer absolut. Padding ini termasuk dalam ketinggian yang digulir secara default, sehingga footer tidak akan pernah tumpang tindih dengan konten di atas.

Skala ukuran teks sedikit atau ubah ukuran jendela browser Anda untuk menguji tata letak ini.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Bekerja dengan baik untuk saya.

Untuk mengatur ketinggian khusus yang dikunci ke suatu tempat:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Berikut ini adalah solusi lain berdasarkan vh, atau viewpoint height, untuk detail kunjungi unit CSS . Ini didasarkan pada solusi ini , yang menggunakan flex sebagai gantinya.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Satuannya adalah vw, vh, vmax, vmin. Pada dasarnya, setiap unit sama dengan 1% dari ukuran viewport. Jadi, saat viewport berubah, browser menghitung nilai itu dan menyesuaikannya.

Anda dapat menemukan informasi lebih lanjut di sini:

Secara khusus:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Jawaban kleolb02 terlihat cukup bagus. cara lain akan menjadi kombinasi dari footer lengket dan hack min-height

Agar min-heightdapat bekerja dengan benar dengan persentase, saat mewarisi simpul induknya min-height, triknya adalah mengatur tinggi simpul induk 1pxdan kemudian anak min-heightakan bekerja dengan benar.

Halaman demo

CSSSolusi murni ( #content { min-height: 100%; }) akan bekerja dalam banyak kasus, tetapi tidak di semua kasus - terutama IE6 dan IE7.

Sayangnya, Anda harus menggunakan solusi JavaScript untuk mendapatkan perilaku yang diinginkan. Ini dapat dilakukan dengan menghitung ketinggian yang diinginkan untuk konten Anda <div>dan mengaturnya sebagai properti CSS dalam suatu fungsi:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Anda kemudian dapat mengatur fungsi ini sebagai penangan untuk onLoaddan onResizeacara:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Saya setuju dengan Levik karena wadah induk disetel ke 100% jika Anda memiliki sidebar dan ingin mereka mengisi ruang untuk bertemu dengan footer, Anda tidak dapat mengaturnya menjadi 100% karena mereka akan 100 persen tinggi induk juga yang berarti footer berakhir didorong ke bawah saat menggunakan fungsi yang jelas.

Pikirkan dengan cara ini jika tajuk Anda mengatakan tinggi 50px dan catatan kaki Anda adalah tinggi 50px dan kontennya hanya dilisensikan secara otomatis ke ruang yang tersisa, katakanlah 100px misalnya dan kontainer halaman adalah 100% dari nilai ini, tingginya akan 200px. Kemudian ketika Anda mengatur tinggi sidebar menjadi 100%, maka itu adalah 200px meskipun seharusnya pas di antara header dan footer. Alih-alih itu berakhir menjadi 50px + 200px + 50px sehingga halaman sekarang 300px karena sidebar diatur dengan ketinggian yang sama dengan wadah halaman. Akan ada ruang putih besar di isi halaman.

Saya menggunakan internet Explorer 9 dan inilah yang saya dapatkan sebagai efek ketika menggunakan metode 100% ini. Saya belum mencobanya di browser lain dan saya berasumsi bahwa itu mungkin bekerja di beberapa opsi lain. tetapi itu tidak universal.

Pertama, Anda harus membuat divdengan id='footer'setelah Andacontent div dan kemudian cukup lakukan ini.

HTML Anda akan terlihat seperti ini:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Dan CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Coba ini:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

The divelemen di bawah div konten harus memiliki clear:both.

Mungkin solusi terpendek (hanya berfungsi di browser modern)

Sepotong kecil CSS ini membuat "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

satu-satunya persyaratan adalah Anda harus memiliki footer tinggi tetap.

Misalnya untuk tata letak ini:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

Anda membutuhkan CSS ini:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Anda dapat mencoba ini: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Itu 100% tinggi dan pusat horizontal.

bagikan saja apa yang telah saya gunakan, dan berfungsi dengan baik

#content{
        height: auto;
        min-height:350px;
}

Seperti disebutkan dalam jawaban Afshin Mehrabani, Anda harus mengatur tinggi badan dan html menjadi 100%, tetapi untuk mendapatkan catatan kaki di sana, hitung tinggi bungkusnya:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}