css 固定标题和 float 内容

标签 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>

问题是我希望 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:hiddendiv.div2

你也可以为容器赋予相同的背景颜色,使 div2 看起来无缝。(它不会在滚动后扩展。)

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

干杯

关于css 固定标题和 float 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1600000/

相关文章:

css - flex 网格对齐

CSS - 在固定定位元素下滚动内容?

html - 仅在 ie 中的 css3 中转换 90 度时元素不可见?

html - 容器的图像 100% 高度 - 最小高度在 Chrome/Safari 上的行为不同

css - 我可以在不知道高度的情况下将::before 元素添加到它的父元素的顶部吗?

javascript - jquery slidetoggle 不会保持打开状态

css - Wordpress:子页面的内容似乎被隐藏了

jquery - 覆盖 jquery-mobile 应用的字体粗细

css - 内联样式元素跨浏览器具有不同的水平间距

javascript - 如何在改变可见性的同时改变背景?