绝对定位和改变固定高度答案

【问题标题】：Absolute positioning and changing fixed height绝对定位和改变固定高度
【发布时间】：2015-04-21 19:57:47
【问题描述】：

我正在使用很多绝对位置和相对位置来为这个项目获得正确的布局。正如您在我的小提琴中看到的，黑色背景的高度设置为固定高度，因为如果我不这样做，它将不会显示。

我的问题是，是否有办法将这个高度设置为只填满窗口？因为在固定高度下，你有一个滚动条或空白，我试图避免

HTML

<div class="section">
  <div class="header">
    <img src="http://placehold.it/100x100&text=logo" alt="logo" />
  </div>
  <div class="header-bg"></div>
</div>

<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aspernatur nemo voluptatem provident fuga     beatae. Dolore explicabo laborum laboriosam debitis eligendi rerum quis nam facere inventore magnam eum nisi sed
  </p>
</div>
<div class="box-bg"></div>

CSS

.section {
  height: 150px;
  margin-bottom: 20px;
}
.header {
  position: absolute;
  z-index: 100;
  width: 100%;
}
.header img {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.header-bg {
  position: relative;
  top: 25px;
  background: green;
  height: 50px;
  width: 100%;
}
.box {
  position: absolute;
  z-index: 200;
  width: 100%;
}
.box p {
  width: 300px;
  height: 200px;
  background: lightgrey;
  margin: 0 auto;
}
.box-bg {
  position: relative;
  top: 100px;
  background: black;
  height: 600px;
}

【问题讨论】：

如果我是正确的，将正文背景设置为黑色，这样它将适合整个窗口，如果没有将 html 和正文设置为 100% 的高度 - 这应该可以工作

标签： html css

【解决方案1】：

不要使用高度，而是使用底部位置：（并将位置更改为绝对位置）。

.box-bg {
    position: absolute;
    top: 270px;
    background: black;
    bottom: 0;
    width: 100%;
}

Updated Fiddle

【讨论】：

谢谢，没想过背景绝对定位，一个简单的解决方案，完美契合

【解决方案2】：

CSS 视口高度可以用来实现这样的事情，但这取决于您支持的浏览器：http://caniuse.com/#feat=viewport-units

此外，从小提琴很难想象你想要实现什么。你能解释一下吗？

那个黑色区域可能只是身体背景颜色？

【讨论】：

是的，我找到了使用 vh 作为高度的解决方案，但它不支持某些较旧的浏览器版本。
深色背景的问题是它必须从内容框的中间开始。我不认为这可以通过使用背景位置的纯色来解决