3

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

在顶部和底部之间，我有一个绝对定位的页面元素 - 一个 div - 这是我的大部分内容出现的地方。当页面元素的内容太大时，我希望它在 y 轴上溢出。在这种情况下，我希望滚动条出现在屏幕的最右侧（不是页面元素），所以我 overflow-y: scroll;在 body 元素上。（有关示例，请参见 Facebook）。

现在，除了页面元素的边框和背景之外，这一切正常。最初在视图中的内容既有边框又有背景，但是当我向下滚动到溢出区域时，它都没有。

我尝试使用绝对 ( bottom: 105px) 和相对 ( height: 100%;) 方法设置页面的高度，但都不起作用。我还尝试用 . 结束页面元素内的内容<p style="clear: both"></p>。

有任何想法吗？谢谢！

4

2 回答 2

0

我不太确定你的边框想要什么。此小提琴仅使用以下代码在内容的顶部和底部有边框：

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;
}
于 2013-01-11T01:01:11.590 回答
0

问题很可能是height: 100%;实际问题。当您填充背景颜色时，它会以 100% 的方式填充它（可见区域）。问题是，由于溢出超过100%，背景颜色不会粘住。

不要使用height:100%，而是放置min-height任何你想要的绝对定位元素。这样，当background-color填充它时，它会填充整个东西，因为溢出总是会继续高于那个最小高度。

编辑：我意识到答案的一大块词很烦人。更简洁：

你有过：

.middle {height:100%;}

摆脱它并将其更改为：

.middle {min-height:100%;}
于 2013-01-10T21:03:20.157 回答