html body is smaller than its contents

10

votes

Here's a basic illustration of the problem:

<html><head><style type="text/css">
    html {width: 100%; height: 100%; background: red;}
    body {width: 100%; height: 100%; background: green;}
    
    .leftbar, .rightbar {height: 100%; background: blue;}

    .leftbar  {float: left;}
    .rightbar {float: right;}

    table {width: 100px; height: 800px; background: black; color: white;
           margin: 0 auto 0 auto;}
</style></head>
<body>
    <ul class="leftbar"><li>one</li><li>two</li></ul>
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul>
    <table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>

We can immediately see that the floated ul elements are as tall as the body which contains them, the problem is that the body is not as tall as the table which it contains.

How do I make the body be big enough? In this example, I want the leftbar and rightbar to go all the way down, as far as scrolling allows, so you can never see any gap below them.

htmlcss

20

votes

Remove height: 100% from your body rule - this makes the body as tall as the viewport height (which is less than the contents height).

6

votes

body{ height:100%; }

This appears to be a misunderstanding of the code. A "100%" height is relative to something. In other words "100% of what?"

What this does is set body = the size of the window. in JSFiddle, it's the size of the rendered box. On a browser, it would be 100% of the viewing window.

So, if shrink your browser window down to a tiny view space, 100% height will be 100% of the tiny size. Which is accurate.

If you have content that's longer than that, well you run into the issues you see in your example. Recall that the table is a child element, not a parent container. CSS inherits from parents, not children. So you have to make sure BODY remains dynamic in it's height setting.

update

Here's a JSFiddle for min-height on body; http://jsfiddle.net/uZCKn/1/ It need HTML height to be 100% to work. Got that from here: min-height does not work with body

The only thing I can think of is a JavaScript to set the height of the side bars or to use faux-columns. But there could be something else going on to get the left/right bar to fill it's containers height as well that I'm missing.

There's part of an explanation.

5

votes

http://jsfiddle.net/6ZeLh/

To fix the body height not going all the way down change body{height:100%} to min-height:100%. If you care, this will not work in IE6. To fix your lists take the floats out. Add position:relative to the body, add position:absolute to .leftbar, .rightbar and set the positions as follows

.leftbar  {left:0; top:0;}
.rightbar {right:0; top:0;}

You can see it in the fiddle I linked above.

2

votes

remove

html, body { height: 100%; }

and add

body { height: fit-content; }

The other thing is to certificate that there is not child div's that is making the things smaller then it really should be.

1

votes

Use tables. They're impure but they work.

The div-based solutions involve unacceptable compromises (absolute dimensions, loss of float).

0

votes

If you use floats, you must use clearfix. Example (overflow: hidden to parent div give you a simplest clear fix):

<div style="overflow: hidden;">
   <ul class="leftbar">
       <li>one</li>
       <li>two</li>
   </ul>
    <ul class="rightbar">
        <li>alpha</li>
        <li>beta</li>
    </ul>
</div>

You can google more clearfixes, especially for your case

html body is smaller than its contents

6 Answers