Problem
I’m attempting to get the content div to stretch all the way to the bottom of the page in the markup below, but it only does so if there’s content to display. The reason I want to do this is so that even if there is no content to display, the vertical border will still appear down the page.
Here’s a link to my DEMO:
Asked by Razor
Solution #1
The issue isn’t that the div isn’t at full height; it’s that the container around it isn’t. This should help in the browser you’re using, which I’m guessing is:
html,body { height:100%; }
Padding and margins may need to be adjusted as well, but this will get you 90% of the way there. You’ll have to fiddle with it a bit if you want it to function with all browsers.
Some outstanding examples can be found on this website:
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
I also suggest visiting http://quirksmode.org/.
Answered by Jason Hernandez
Solution #2
Rather than slapping a footer at the bottom of the page, I’ll aim to address the question right in the title.
http://jsfiddle.net/NN7ky (move the frame handle to see the effect) (On the plus side, it’s clean and uncomplicated.) disadvantage: flexbox is required (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 – perhaps I’m simply too tired to think.
Answered by Gima
Solution #3
Try experimenting with the CSS rule below:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Adapt the height to the needs of your page. For cross-browser compatibility, height is specified twice.
Answered by Kevin Read
Solution #4
With the min-height statement, you can sort of get around it.
<div style="min-height: 100%">stuff</div>
Answered by Owen
Solution #5
All browsers do not support the min-height property. The height attribute will cut your #content short if you require it to prolong its height on larger pages.
Inside the #content div, you might add an empty div with a width of 1px and a height of, say, 1000px. This will compel the content to be at least 1000px tall while still allowing lengthier content to grow in height as needed.
Answered by Gene
Post is based on https://stackoverflow.com/questions/147528/how-do-i-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no-c