0 
<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% 高度。

我需要彩色正文到页面底部，无论其中的文本数量如何。

小提琴在这里

4

4 回答 4

2

您应该使用另一个<div>标签。

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

也有这个颜色：

// css
#content { background: red; }

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

于 2013-10-10T14:02:02.957 回答
1

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

jsFiddle

于 2013-10-10T13:59:52.777 回答
1

这可能不是最好的解决方案，但这里有一种解决方法：

添加display:table;到你的身体。

小提琴

于 2013-10-10T14:01:27.283 回答
1

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

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

这是一个工作演示。

于 2013-10-10T14:04:58.717 回答