css 固定标题和浮动内容答案

【问题标题】：css fixed header and floating contentcss 固定标题和浮动内容
【发布时间】：2016-11-05 01:01:41
【问题描述】：

这是我的 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 是基于浮点的，但不滚动它。文档类型很严格。浏览器：ff3。有可能吗？

【问题讨论】：

标签： css

【解决方案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;}

干杯

【讨论】：