CSS股利不会100％的高度，我的内容

我有这样的CSS代码：CSS股利不会100％的高度，我的内容

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％这样的文字熄灭的分度，背景颜色。

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

来源

2013-08-02 charlie

尝试'显示：直列block'你不能'inline'对象设置的尺度，你也可能要使用min-height 100％在你的html和body上，就好像你的内容长于你的viewport它会被截断 – Pete

不要使用height：100％use height：auto –

试试这个#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-02 09:52:46 falguni

请注意，Internet Explorer只支持'display：table'自8版以来。其他主流浏览器一度得到了很好的支持。 http://caniuse.com/css-table – michaelward82

@ michaelward82请检查http://stackoverflow.com/questions/3764699/internet-explorer-8-bug-with-display-table – falguni

试试这个只是删除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-02 09:59:40

不要将元素的高度限制为100％。您可以将其应用于最小高度。问题是当你漂浮元素的时候，他们失去了对父母的范围。所以，你必须将clearfix应用于其子元素被浮动的父元素。

最好的是NicolasGallagher's clearfix。

易于使用。导入并将类名称添加为父元素（在您的案例中为'page-body'）。就是这样，现在子元素即使浮动，也会增加父元素的维度。

来源

2013-08-02 10:05:12

这是因为内部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 
    }

来源

2013-08-02 10:18:15 Panos

CSS股利不会100％的高度，我的内容

回答

相关问题