body height does not fill page

Question

I have tried to set 100% height on the body, it works if there is no content, but with content the body does not fill the page.

<html>
 <body>
 test body
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
     <div class="item"> asdasdasda sda sda sdas das d</div>
</body>

html {
    background: red;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

body {
    background: white;
    max-width: 320px;
    height: 100%;
    margin: auto;
}

.item {
    height: 150px;
}

I am getting MAD!

JS Fiddle: http://jsfiddle.net/02dknpeo/2/

You can add `overflow:hidden;` to see it works. – Alex Nov 17 '15 at 14:49 — Alex, Nov 17 '15 at 14:49
just remove height. set min-height to 100% – tiny sunlight Nov 17 '15 at 14:51 — tiny sunlight, Nov 17 '15 at 14:51

score 5 · Accepted Answer · answered Nov 17 '15 at 14:48

5

The problem is that the body stays the height of the page, regardless if the content is overflowing or not.
Use min-height so it will be the pages height if the content isn't taller then the window, but will grow to fit the content if it is:

body {
    background: white;
    max-width: 320px;
    min-height: 100%;
    margin: auto;
}

http://jsfiddle.net/bv1aaub6/

answered Nov 17 '15 at 14:48

Jacob G

13,762
3
47
67

Thank you for the solution! it was not working with my code so I have find out that was caused by floating divs. This solution would not work if there are floating divs in the body so I had to replace the float with flex.... unbelievable. – MeV Nov 17 '15 at 15:34
@MaRco85 trick with float, you can just set their parents overflow to hidden, in your case `body{overflow:hidden;}`, and the parent will grow to fit them – Jacob G Nov 17 '15 at 15:43

score 2 · Answer 2 · answered Nov 17 '15 at 14:48

2

Change the height of 100% on the body element to a min-height instead:

Updated Example

In doing so, the body element will always have at least a height of 100% rather than always having a height of 100% of the window (which is what your problem was).

body {
    background: white;
    max-width: 320px;
    min-height: 100%;
    margin: auto;
}

answered Nov 17 '15 at 14:48

Josh Crozier

233,099
56
391
304

Thank you for the solution! it was not working with my code so I have find out that was caused by floating divs. This solution would not work if there are floating divs in the body so I had to replace the float with flex.... unbelievable. – MeV Nov 17 '15 at 15:34

score 1 · Answer 3 · answered Nov 17 '15 at 14:47

1

You're restricting the height of the body element to the height of the viewport. Don't.

body {
    /* height: 100% */
}

If you need it to be at least that high, use min-height.

Demo

answered Nov 17 '15 at 14:47

isherwood

58,414
16
114
157

Thank you for the solution! it was not working with my code so I have find out that was caused by floating divs. This solution would not work if there are floating divs in the body so I had to replace the float with flex.... unbelievable. – MeV Nov 17 '15 at 15:33

score 1 · Answer 4 · answered Nov 17 '15 at 14:49

1

Just remove the height:100% from the body rule.

jsFiddle example

answered Nov 17 '15 at 14:49

j08691

204,283
31
260
272

Thank you for the solution! it was not working with my code so I have find out that was caused by floating divs. This solution would not work if there are floating divs in the body so I had to replace the float with flex.... unbelievable. – MeV Nov 17 '15 at 15:34

body height does not fill page

4 Answers4