Question

我有这个CSS代码：

html, body {
    font-family:Arial;
    padding:0;
    margin:0;
    background:#0CF;
    height:100%;
}

#wrapper {
    width:100%;
    height:100%;
}

#page-body {
    width:75%;
    min-height:600px;
    height:100%;
    border-top:5px solid #c6d6e9;
    background:#c6d6e9;
    margin:10px auto 30px auto;
    padding:10px;
}
#page-body-inner {
    width:100%;
    margin:0 auto 0 auto;
}

.page-left {
    display:inline;
    float:left;
    width:190px;
}
.page-right {
    display:inline;
    float:left;
    width:700px;
    height:100%;
    margin-left:15px;
}

出于某种原因，右边内容的高度不是100％所以文本会以背景颜色离开div。

这是一个小提琴：http://jsfiddle.net/yKCJG/

Answer 1

试试此#page-body添加display:table;

http://jsfiddle.net/yKCJG/2/

#page-body {
    width:75%;
    min-height:600px;
    height:100%;
    border-top:5px solid #c6d6e9;
    background:#c6d6e9;
    margin:10px auto 30px auto;
    padding:10px;
    display:table;

}

Answer 2

尝试此操作只需删除height:100%并放置height:auto

即可

#page-body {
    background: none repeat scroll 0 0 hsl(213, 44%, 85%);
    border-top: 5px solid hsl(213, 44%, 85%);
    display: inline;
    float: left;
    height: auto;
    margin: 10px auto 30px;
    min-height: 600px;
    padding: 10px;
    width: 75%;
}

希望它会有所帮助

Answer 3

不要将元素的高度限制为100％。您可以将其应用于最小高度。问题是当你浮动元素时，它们会失去父母的范围。因此，您必须将clearfix应用于其子元素浮动的父元素。

最好的是NicolasGallagher's clearfix。

易于使用。导入它并将类名称'cf'添加到父元素（在您的情况下为'page-body'）。就是这样，现在子元素增加了父元素的维度，即使它是浮动的。

Answer 4

这是因为内部div是浮动的，因此父div #pagebody没有实际高度。有两种方法可以解决这个问题。

删除#pagebody上的高度：100％并添加overflow:hidden。

删除#pagebody上的高度：100％并添加：

#page-body:after{
   content: '.';
   display: block;
   overflow: hidden;
   visibility: hidden;
   font-size: 0;
   line-height: 0;
   width: 0;
   height: 0;
   clear:both
   }

CSS Div不会为我的内容增加100％的高度

4 个答案: