Question

<body>    
<div id='top'>this is top</div>
some text... 
</body>

CSS

html{
    height:100%;
    background:green;
}
body{
    max-width:50%;
    height:100%;  //doesn't work
    background:red;
    margin:0 auto;
}
#top{
    height:30px;
    background:blue;
}

当some text...标记中的body足够长以至于显示滚动条时，body将停止为100％高度。

无论文字的数量多少，我都需要在页面底部设置彩色的主体。

小提琴是here

Answer 1

您应该使用另一个<div>代码。

<div id="content">asdomasdosamd oasdimsad </div>

也有这个颜色：

// css
#content { background: red; }

http://jsfiddle.net/4pxng/16/

Answer 2

您需要删除height: 100%;。无论文本量如何，背景颜色都将保持红色。

jsFiddle

Answer 3

这可能不是最佳解决方案，但这是一种解决方法：

将display:table;添加到您的身体。

<强> Fiddle

Answer 4

这是一个不使用任何额外元素的解决方案：

body{
    max-width:50%;
    min-height:100%; // this is for when text does not go down to bottom of page
    height: auto;    // this is for when text overflows the page
    background:red;
    margin:0 auto;
}

这是一个有效的demo。

身体不是100％的身高

4 个答案: