2

我正在尝试设计一个具有几个页眉、一些主要内容和一个页脚的页面布局。

我想在主要内容中使用 jQuery UI 选项卡小部件并在其周围有边框，因此 div 必须填充页眉和页脚之间的所有空间，但我还希望内容在需要时扩展，从屏幕底部和出现一个滚动条，因此我可以向下滚动并查看它。

实际上，我希望内容 div 的最小高度是页眉和页脚之间的距离，但允许它扩展。

我已经实现了Sticky Footer方法，如果我不希望我的主要内容周围有边框，它会很好地工作。在这个jsFiddle示例中，带有红色 2px 边框的 div 最初需要填充页面，当您单击“添加东西”按钮添加更多内容时，它需要向下推页脚并显示滚动条。

这就是我想要实现的目标：

在此处输入图像描述

...使用这些规则：

  • 内容需要有边框。
  • 内容需要从填充页眉和页脚之间的空间开始。
  • 内容需要超出页面底部，显示滚动条。
  • 随着内容的增长，页脚需要向下推。
  • 仅使用 CSS，这样如果内容动态变化，一切都会自动调整。
  • 仅在现代浏览器中工作，我对支持 IE<8 不感兴趣。

我试过了：

  • 绝对定位，但这会将内容固定为屏幕大小，并且不允许它超出底部。
  • jQuery 定位，但这感觉太像 hack，而且似乎是修复它的坏方法。
  • 在各个地方使用height: 100%and min-height: 100%，但似乎没有达到我想要的效果。
  • 查看围绕同一问题的其他Stack Overflow问题，但似乎没有一个能够解释超出屏幕底部的内容。
4

2 回答 2

0

我能想到的最好的方法是http://jsfiddle.net/Atjxc/6/

因为窗口的高度是可变的，所以我只能使用百分比以及绝对定位。

.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

我为主要部分添加了一个容器，当内容变得太长时，它会显示一个滚动条。我不能设置边框，因为它们必须设置为 px 值，这会弄乱我基于百分比的高度。

于 2013-01-22T13:43:55.133 回答
0

好吧，您可以只测量页眉和页脚之间的实际距离，然后将最小高度设置为确切的 px。

例如，之间的距离是 600px，

然后设置

min-height:600px;
height:100%

这样，当您的内容适合最小高度时，例如。600px 那么高度应该是 600px，现在当内容被添加并且超出 600px 的高度时，容器 div 会在高度上拉长以容纳被 height:100% 覆盖的添加内容；.

是的，您可以使用“Measure It”（它是 chrome/firefox 扩展）来实时测量屏幕上的距离，它更方便。

希望这会有所帮助，这是 jsfiddle http://jsfiddle.net/Atjxc/11/

于 2013-01-22T15:58:44.420 回答