body height does not fill page

This question already has an answer here:

Make body have 100% of the browser height 19 answers

---

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/

---

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;
}

---

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

链接地址: http://www.djcxy.com/p/89390.html

上一篇: 以百分比表示的高度属性不起作用

下一篇: 身高不填页