html - CSS:在不指定高度的情况下将容器固定在顶部

Question

有没有办法在不指定高度的情况下将容器固定在顶部？

我有一个放在 body 上的容器，这样周围就有一个边距。容器在 overflow: auto 上，因此它超出了屏幕的高度(这是我想要的，我不想指定高度)。

我正在寻找一种方法，使容器向上滚动但边距保持可见(它在边距下方向上滚动。有没有办法在不固定容器高度的情况下做到这一点？

提前致谢!

编辑:

http://jsfiddle.net/aybjbxvc/

我想在滚动时保留顶部的灰色边距，而其他一切保持原样。

Answer 1

您可以通过将 container 放在 wrapper div 中来做到这一点:

<div id="wrapper">
  <div id="container">
    ...
  </div>
</div>

为 wrapper 声明这些样式，它将占据屏幕的前 5% 以外的所有内容。

#wrapper {
  position: absolute;
  top: 5%;
  height: 95%;
  width: 100%;
  overflow: auto;
}

从 body 和 container 中移除 overflow 和 padding 样式。将 body 的边距更改为 0px。这些更改将删除额外的滚动条:

body {
  background: #e8e8e1;
  margin: 0px;
}

#container {
  width: 200px;
  background: #fcfcf7;
  margin: 0px auto 0px auto;
  box-shadow: 0 0 8px #a1a19a;
}

Fiddle