如何在没有“position：absolute;”的情况下使DIV填充页面？

时间：2013-01-22 13:11:32

标签： css layout html

我正在尝试设计一个页面布局，其中包含几个标题，一些主要内容和一个页脚。

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

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

I've implemented Sticky Footer方法，如果我不想在主要内容周围添加边框，那么该方法会非常好用。在这个jsFiddle示例中，带有红色2px边框的div需要首先填充页面，当您单击“添加材料”按钮添加更多内容从屏幕底部开始时，需要按下页脚向下并显示滚动条。

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

enter image description here

......遵守这些规则：

  • 内容需要有边框。
  • 内容需要通过填充页眉和页脚之间的空格来开始。
  • 内容需要超出页面底部，显示滚动条。
  • 随着内容的增长，需要推送页脚。
  • 仅使用CSS，因此如果内容动态更改，则所有内容都会自动调整。
  • 仅在现代浏览器中工作，我对支持IE＆lt; 8。
    • 不感兴趣

我试过了：

  • 绝对定位，但这会将内容修复为屏幕大小，并且不允许其扩展到底部。
  • jQuery定位，但这感觉太像黑客，似乎是一个不好的解决方法。
  • 在不同的地方使用height: 100%和min-height: 100%，但似乎没有达到我想要的效果。
  • 围绕同一问题查看其他Stack Overflow questions，但其中没有一个似乎说明内容超出了屏幕底部。

2 个答案:

答案 0 :(得分：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值，并且会弄乱我的基于百分比的高度。

答案 1 :(得分：0)

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

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

然后设置

min-height:600px;
height:100%

这样，当你的内容符合最小高度时，例如。 600px然后高度应为600px，现在当添加内容并且它生长在600px高度之外时，容器div应该在高度上伸长以适应被高度覆盖的添加内容：100％; 。

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

希望这会有所帮助，并且继续jsfiddle http://jsfiddle.net/Atjxc/11/

相关问题
最新问题