0

我有这个 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/

4

4 回答 4

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;

}
于 2013-08-02T09:52:46.853 回答
0

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

  1. 删除 #pagebody 上的 height:100% 并添加overflow:hidden.

  2. 删除 #pagebody 上的 height:100% 并添加：

    #page-body:after{
   content: '.';
   display: block;
   overflow: hidden;
   visibility: hidden;
   font-size: 0;
   line-height: 0;
   width: 0;
   height: 0;
   clear:both
   }
于 2013-08-02T10:18:15.653 回答
0

试试这个只是删除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%;
}

希望它会有所帮助

于 2013-08-02T09:59:40.280 回答
0

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

最好的是NicolasGallagher 的 clearfix。

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

于 2013-08-02T10:05:12.247 回答