Question

这是我的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的，但是没有在其中滚动。 doctype是严格的。浏览器：ff3。有可能吗？

Answer 1

你可以在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修复了标题和浮动内容

1 个答案: