0

我正在尝试创建一个包含两个部分的容器 - 顶部将是一个滚动 div，它占据其容器垂直高度的 100%，减去粘性页脚的高度。粘性页脚不能有硬编码的高度（因为它可以在两种不同高度的两种模式下工作），这是我感到困扰的地方。我宁愿不使用 js，如果可能的话只使用 css。

HTML

<div class="container">
   <div class="scrollArea">
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
   </div>
   <div class="footer">
      <!-- the contents of the footer will determine the height needed -->
   </div>
</div>

CSS

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.scrollArea {
    position: absolute;
    top: 0px;
    bottom [height of sticky footer]; left: 0px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.footer {
    position: absolute;
    bottom: 0px;
    height: [height of sticky footer];
    left: 0px;
    right: 0px;
}
4

1 回答 1

0

您不想position: absolute;在所有东西上都使用.. 这将使样式设置变得非常困难，因为绝对元素在技术上没有高度（从其他元素的角度来看）。通过使用底部、左侧、顶部和右侧都为 0 的“拉伸技术”，您会进一步混淆事物。

您的问题在如何设置高度方面也有点令人困惑。它是通过 javascript 设置的吗？通过媒体查询？如果是其中任何一种情况，您都可以通过相同的方法轻松设置滚动区域的高度，让它们一前一后地改变。

如果由于某种原因您必须只设置这个元素的高度，您可以让 css 表格显示属性来计算滚动区域的新高度，方法是将容器设置为display: table;，并在滚动区域周围添加另一个包装器. 将该包装器和页脚设置为display: table-row;将使它们布局。

看看这个看看我的意思：

http://jsfiddle.net/6gprU/3/

您的代码示例建议将以某种方式设置高度..但如果不是这种情况，并且您绝对不能设置高度（如果进入页脚的内容是动态的且大小不可预测，则会出现这种情况）那么你让这变得越来越困难。在这种情况下，这将取决于整体容器高度是否需要保持一定大小。如果确实如此，就像我假设的那样，那么您可能需要重新考虑您的布局，因为您有太多变量无法使用纯 css 来做到这一点。

作为最后的补充，还有另一个选项可以让这变得非常容易。CSS 有一个特性叫做calc()：

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

此功能允许您在 css 中执行计算，就像在 javascript 中一样，并允许您动态设置任何相对于任何东西的高度。但是，我把它放在最后，因为浏览器支持有点有限。它不适用于 IE 8 或更低版本。

检查此站点以查看它将在哪里工作，然后决定这对您是否有效。

http://caniuse.com/calc

于 2013-10-04T20:57:06.507 回答