CSS: 如何使背景和边框溢出？

Question

在我的网页中，我使用CSS固定了顶部和底部的部分，即position: fixed;。

在顶部和底部之间，我有一个绝对定位的页面元素 - 一个div - 这是大多数内容出现的地方。当内容太大而无法适应页面元素时，我希望它在y轴上溢出。在这种情况下，我希望滚动条出现在屏幕的右侧（而不是页面元素），因此我在body元素上使用了overflow-y: scroll;。（参见Facebook的示例）。

现在，这很好用，除了页面元素的边框和背景。最初在视图中的内容既有边框又有背景，但是当我向下滚动到溢出区域时，它既没有边框也没有背景。

我尝试使用绝对（bottom: 105px）和相对（height: 100%;）方法设置页面的高度，但都无效。我还尝试在页面元素内部以<p style="clear: both"></p>结尾的方式结束内容。

有什么想法吗？谢谢！

- DatsunBing

---

设置边框和背景，对于一个没有固定大小的子元素。 - Kevin Boucher

Answer 1

问题很可能是 height: 100%;。 当填充背景颜色时，它会以100%的方式填充（可见区域）。 问题是由于溢出超过了100％，因此背景颜色无法粘在上面。
不要使用 height:100%，而是将绝对定位元素的min-height设置为所需值。 这样，当background-color填充它时，它会填满整个高度，因为溢出始终会继续在最小高度之上。
编辑：我意识到一个大块的答案很烦人。更简洁地说：
您有：

.middle {height:100%;}

把那个去掉，改成：

.middle {min-height:100%;}

- Jason

---

谢谢mOose89，但我真的希望页面元素填充顶部和底部之间的空间，所以不想指定最小高度。 - DatsunBing

你尝试过使用 min-height: 100% 吗？这应该与 height: 100% 相同，用于填充空间，但应允许包括溢出内容。 - Jason

Answer 2

我不太确定你对边框的要求是什么。这个示例只在内容的顶部和底部有边框，使用以下代码：

HTML

<div class="top">Top</div>
<div class="middle">
  <div class="content"></div>
</div>
<div class="bottom">Bottom</div>

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
}

.middle {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 100px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 100px;
}

这个编辑器一直围绕着边框，使用与上面相同的代码（相同的HTML）：

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  border-bottom: 10px solid black;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
  border-top: 10px solid black;
  border-bottom: 0;
}

.middle {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 110px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border-right: 10px solid black;
  border-left: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 110px;
}

- ScottS