CSS固定頭部和浮動內容

是我的CSS：CSS固定頭部和浮動內容

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 300px; 
 
    margin: 0px; 
 
} 
 
div.div1 { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
div.div2 { 
 
    background-color: blue; 
 
    height: 100%; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div>

的問題是，我想被浮動爲基礎的機構，但沒有在它裏面滾動。文檔類型是嚴格的。瀏覽器：ff3。可能嗎？

來源

2009-10-21 gasan

您可以在div2中添加一個div來顯示其中的內容。實際上，div將具有100px的頂部邊距，以避免頂部div與內容重疊。 div2將從頂部延伸到底部，但頂部100px將不會被內容div使用。

所以訣竅是，讓div1的高度與內容的上邊距相同。然後它會沒事

HTML：

<body> 
<div class="div1">div1 div1 div1 div1</div> 
<div class="div2"> 
    <div class="content"> 
    <div2 test <br/> 
    <div2 test <br/> 
    <div2 test <br/> 
    <div2 test <br/> 
    </div> 
</div> 
</body>

和CSS將是這樣的：

html,body {height:100%;width:300px;margin:0px;} 
div.div1 {height:100px; background-color:red; position:absolute; width:300px;} 
div.div2 {background-color:blue; height:100%;} 
div.content {margin-top:100px; float:left; width:100%;}

，如果你想隱藏滾動完全只是增加overflow:hidden到div.div2

也你可以給容器賦予相同的背景顏色，使div2看起來無縫（它不會在滾動後延長）。

div.content {margin-top:100px; float:left; width:100%; background:blue;}

歡呼聲

來源

2010-01-27 11:36:21 eringen

CSS固定頭部和浮動內容

回答

相關問題