Bagaimana cara memaksa blok DIV untuk meluas ke bagian bawah halaman bahkan jika itu tidak memiliki konten?

190

Pada markup yang ditunjukkan di bawah ini, saya mencoba untuk mendapatkan div konten untuk merentangkan semua jalan ke bagian bawah halaman tetapi itu hanya peregangan jika ada konten untuk ditampilkan. Alasan saya ingin melakukan ini adalah agar batas vertikal tetap muncul di bawah halaman walaupun tidak ada konten untuk ditampilkan.

Inilah HTML saya :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

Dan CSS saya :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css html border Pisau cukur
sumber
Apa yang ingin Anda lakukan jika ada lebih banyak konten yang bisa muat di halaman? Peramban apa yang Anda pedulikan?
drs9222

Jawaban:

116

Masalah Anda bukanlah bahwa div tidak pada ketinggian 100%, tetapi bahwa wadah di sekitarnya tidak. Ini akan membantu dalam browser saya menduga Anda menggunakan:

html,body { height:100%; }

Anda mungkin perlu menyesuaikan bantalan dan margin juga, tetapi ini akan membuat Anda 90% dari perjalanan ke sana. Jika Anda perlu membuatnya berfungsi dengan semua browser Anda harus sedikit mengacaukannya.

Situs ini memiliki beberapa contoh luar biasa:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Saya juga merekomendasikan pergi ke http://quirksmode.org/

Jason Hernandez
sumber
47
Solusi ini tidak ramah untuk halaman yang menggulir.
jbranchaud
3
properti min-height di CSS harus membantunya ... Saya kira
Alfabravo
1
Menariknya, ini mengurutkan masalah gulir saya dan bukannya menyebabkannya
Alan Macdonald
Ini tidak berfungsi untuk saya dalam versi terbaru chrome.
HelloWorldNoMore
49

Saya akan mencoba menjawab pertanyaan secara langsung dalam judul, alih-alih bersikeras menempelkan footer ke bagian bawah halaman.

Buat div hingga ke bagian bawah halaman jika tidak ada cukup konten untuk mengisi viewport browser vertikal yang tersedia:

Demo di (seret gagang bingkai untuk melihat efek): http://jsfiddle.net/NN7ky
(terbalik: bersih, sederhana. Downside: membutuhkan flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - atau aku terlalu mengantuk

Gima
sumber
14
Beberapa dari kita cukup beruntung hanya mendukung browser "modern" jadi ini sangat berguna bagi saya. Terima kasih gima. Saya mencoba beberapa cara untuk melakukan sesuatu seperti ini tetapi selalu rusak dengan berbagai cara halus. Ini jauh lebih baik. Masih tidak mengerti mengapa itu bekerja seperti ini.
Chris Nicola
1
Elemen Flexbox mencoba membagi area kontennya di antara elemen-elemen di dalamnya. Solusi yang saya tawarkan bekerja dengan 1) menolak menyusut divs, dan 2) memungkinkan tumbuhnya .div2. Karenanya divs tidak menyusut untuk menyembunyikan konten mereka, dan hanya .div2 diizinkan untuk berkembang.
Gima
Jadi ini memperbaiki masalah yang saya alami di Firefox, di mana kontennya masih sedikit terlalu besar untuk browser. Sayangnya, di Chrome, ini saja tidak memperbaiki masalah itu. Namun, juga mengatur margin dan padding ke 0 tidak.
Michael Scheper
ini adalah jawaban yang benar, min-height: 100% hanya berfungsi jika tidak ada yang lebih dalam wadah induk, dan calc tidak benar-benar membantu jika saudara kandung di atas elemen yang berkembang memiliki ketinggian yang tidak diketahui
zakius
Setelah berjam-jam berjuang dengan masalah ini, ini adalah satu-satunya solusi yang benar-benar memperbaikinya untuk saya. Hanya melewatkan sedikit penjelasan tentang apa yang dilakukan masing-masing bagian. Tapi bagaimanapun, terima kasih banyak @Gima.
pylund
18

Coba mainkan dengan aturan css berikut:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Ubah ketinggian agar sesuai dengan halaman Anda. ketinggian disebutkan dua kali untuk kompatibilitas lintas browser.

Kevin Read
sumber
ini berfungsi, tetapi saya menemukan bahwa jika saya meningkatkan ketinggian minimum hingga lebih dari 600px, itu akan membuat gulir. Apakah Anda tahu mengapa ini terjadi?
Siddharth Patel
1
@SiddharthPatel Karena div #content membanjiri induknya. Jadi atur induk #content div untuk memiliki overflow: auto atau overflow: nilai css tersembunyi dan itu harus diperluas / overflow agar sesuai, daripada gulir. Mungkin akan lebih baik untuk mengajukan pertanyaan seperti pertanyaan baru di waktu berikutnya daripada komentar :)
Colt McCormack
Setelah mencoba setiap metode jawaban, ini adalah satu-satunya yang berfungsi. Bahkan ini tidak berfungsi dengan baik, karena saya harus menyesuaikan nilai tinggi agar sesuai dengan tinggi halaman, sehingga diperlukan penyesuaian. Namun, itu berfungsi sama untuk semua browser.
TARKUS
Terima kasih banyak atas jawaban ini. Ini sederhana dan berfungsi dengan baik pada berbagai platform. Saya benar-benar menggunakan ini sebelumnya tanpa disadari sekitar 1 tahun yang lalu, berharap saya bisa naik dua kali.
vedi0boy
6

Anda dapat meretasnya dengan deklarasi min-height

<div style="min-height: 100%">stuff</div>
Owen
sumber
3

Properti min-height tidak didukung oleh semua browser. Jika Anda perlu #content Anda untuk memperpanjang tingginya di halaman yang lebih panjang, properti height akan memotongnya.

Ini sedikit hack tetapi Anda bisa menambahkan div kosong dengan lebar 1px dan tinggi misalnya 1000px di dalam #content div Anda. Itu akan memaksa konten menjadi setidaknya 1000px tinggi dan masih memungkinkan konten yang lebih panjang untuk memperpanjang ketinggian saat dibutuhkan

Gene
sumber
3

Meskipun tidak semewah CSS murni, sedikit javascript dapat membantu mencapai hal ini:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
sumber
3

Mencoba:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Belum mengujinya ...

Steph
sumber
3

Footer lengket dengan ketinggian tetap:

Skema HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
David Horak
sumber
2

Coba http://mystrd.at/modern-clean-css-sticky-footer/

Tautan di atas tidak aktif, tetapi tautan ini https://stackoverflow.com/a/18066619/1944643 ok. : D

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
Vinicius José Latorre
sumber
1
@codemirror terima kasih, saya baru saja mengedit komentar dengan tautan lain yang berfungsi.
Vinicius José Latorre
1

Anda bisa menggunakan satuan panjang "vh" untuk properti min-height dari elemen itu sendiri dan orang tuanya. Ini didukung sejak IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
Nico
sumber
Ini hanya merentangkan div ke ketinggian viewport, bukan halaman itu sendiri.
jansmolders86
1

Saya pikir masalah akan diperbaiki hanya membuat html mengisi 100% juga, mungkin tubuh mengisi 100% dari html tetapi html tidak mengisi 100% layar.

Coba dengan: 

html, body {
      height: 100%;
}
David Marciel
sumber
0

Saya tidak punya kode, tapi saya tahu saya pernah melakukan ini menggunakan kombinasi tinggi: 1000px dan margin-bottom: -1000px; Coba itu.

Alexander Morland
sumber
Wow, itu benar-benar berfungsi! Tetapi jika konten meluap wadah, tidak mungkin untuk melihat bagian meluap ...
adripanico
0

Bergantung pada bagaimana tata letak Anda bekerja, Anda mungkin bisa pergi dengan mengatur latar belakang pada <html>elemen, yang selalu setidaknya setinggi viewport.


sumber
0

Ini tidak mungkin dilakukan hanya menggunakan stylesheet (CSS). Beberapa browser tidak akan menerima

height: 100%;

sebagai nilai yang lebih tinggi dari sudut pandang jendela browser.

Javascript adalah solusi lintas browser termudah, meskipun seperti yang disebutkan, bukan yang bersih atau indah.

Martin
sumber
-2

Saya tahu ini bukan metode terbaik, tapi saya tidak bisa mengetahuinya tanpa mengacaukan header, menu, dll. Jadi .... Saya menggunakan meja untuk dua colum itu. Itu adalah perbaikan CEPAT. Tidak perlu JS;)

Pergi ke
sumber
-2

Bukan yang terbaik atau implementasi terbaik dari standar terhebat, tetapi Anda dapat mengubah DIV untuk SPAN ... Ini tidak begitu direkomendasikan tetapi perbaikan cepat = P =)

Metafaniel
sumber