html body is smaller than its contents

Question

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.

score 20 · Answer 1 · answered Feb 22 '12 at 16:02

20

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

answered Feb 22 '12 at 16:02

Alexander Pavlov

31,598
5
67
93

That makes the `body` taller, but the `ul` are still only the height of the viewport. – spraff Feb 22 '12 at 16:08
Makes sense. For `ul`s to fill up the `body`, it needs to have some definite height set. Set it to `800px`, same as its tallest child element. – Alexander Pavlov Feb 22 '12 at 16:35
1

This makes so much sense and totally fixed this randomly annoying issue I had on a site like a year ago. I switched it from height:100% to min-height:100% to account for pages where the body is shorter than the viewport. Thanks! – elainevdw Feb 24 '16 at 23:33
If you apply a background to a 100% container within that body, and content isn't as tall as the view port, your background will be cut, though. (if you use this approach) – Nikolay Tsenkov Aug 17 '18 at 02:11

score 6 · Answer 2 · edited May 23 '17 at 11:46

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.

score 5 · Answer 3 · answered Feb 22 '12 at 16:21

5

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.

answered Feb 22 '12 at 16:21

hradac

2,431
1
19
21

Ah, that's a good fix. Make the side bars absolute position. – jmbertucci Feb 22 '12 at 16:31

score 3 · Answer 4 · answered Nov 07 '17 at 14:27

3

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.

answered Nov 07 '17 at 14:27

Fillype Farias

622
1
8
20

1

`fit-content` is an experimental property that should not be used in production code in 2017. – TylerH Nov 07 '17 at 14:37
@TylerH could you post some link to know more about this issue? – Fillype Farias Nov 07 '17 at 14:55

score 2 · Accepted Answer · answered Feb 24 '12 at 17:09

2

Use tables. They're impure but they work.

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

answered Feb 24 '12 at 17:09

spraff

32,570
22
121
229

1

_fsvo_ "work". It's short-sighted to think that just because they work for your particular use case they _must_ work for all other contexts in which your content will be accessed. – Lightness Races in Orbit Mar 02 '12 at 18:00
2

They work in the neccessary context, and the alternatives *don't*. – spraff Mar 03 '12 at 15:54
2

It doesn't reflect well on our community that we down-vote a valid answer that potentially solves the OP's problem, simply because it's out of fashion. Tables are difficult to maintain, and break normal flow, but they're an intelligent solution to several thorny layout problems, particularly in a pre-flexbox world. (As is `display: table;` on a normal block-level element.) – XML Jan 26 '16 at 10:59

score 0 · Answer 6 · answered Mar 19 '16 at 08:38

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 Answers6

Linked