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％的高度，我的內容

回答

相關問題