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固定头部和浮动内容

回答

相关问题