这是我的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>
问题是我希望 body 是基于 float 的,但不在其中滚动。 文档类型是严格的。浏览器:ff3。可能吗?
最佳答案
可以在div2中多加一个div来显示里面的内容。 实际上,该 div 将有 100px 的顶部边距,以避免顶部 div 与您的内容重叠。 div2 将从上到下延伸,但内容 div 不会使用顶部 100px。
技巧是,让 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;}
干杯
关于css 固定标题和 float 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1600000/