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 回答