使用 DIV 的连续布局答案

【问题标题】：Continuous layout with DIVs使用 DIV 的连续布局
【发布时间】：2011-08-13 22:13:30
【问题描述】：

<div id="top">
*height: auto;
min-height: 100%;*

    <div id="content">
    *min-height: 500px;*
    </div>

    <div id="middle">
    *css ???*
    </div>
</div>

<div id="footer">    
</div>

当屏幕尺寸正常时，此代码运行良好。但在全屏模式下，页脚进入页面底部（需要的行为），但“中间”div 必须增加其高度才能获得页脚。我的意思是，这 3 个元素（内容、中间和页脚）必须是连续的。

我应该使用哪些 css 规则来执行此行为？

提前致谢！

更新。

我使用了几个 css 规则和作品，但在 IE8 中没有（在 IE9、Chrome、FF3 和 FF4 中有效）。相关的 CSS 是：

Top{ height: auto; }
Content{ min-height: 100%; }
Middle{ overflow: auto; padding-bottom: 130px; }
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }

【问题讨论】：

您希望页脚始终停留在屏幕底部，还是在内容向下推动时滚动？
@Thomas 总是在底部，但不固定。
啊，好的。然后查看我关于媒体查询的答案。您可以根据视口高度设置宽度和高度以及任何其他 css 属性。

标签： html css

【解决方案1】：

坏消息：老实说，伙计，我不认为使用这个确切的规范是可能的。无论如何，这需要一些非常聪明的CSS。但是，表格会很好地工作。我完全反对这个想法，但如果这个设计要求是必须的，那么也许你应该走这条路。

好消息：根据为什么您需要它们保持流畅，我们也许可以提供所需的效果。如果只是为了背景匹配，我们可能会这样做。用更多信息更新你的帖子，我会（希望）用答案更新我的帖子。

【讨论】：

Hi 页脚必须粘在底部（但不固定），内容 div 的高度可变，如果内容 div 太短，中间的 div 必须增长到接触页脚以避免div 之间的空格。我使用了几个 css 规则和作品，但在 IE8 中没有（适用于 IE9、Chrome、FF3 e FF4）。请使用我使用的 css 查看上面的问题。谢谢:)
我需要知道的是为什么你需要成长。如果您要垂直对齐中间的东西，那么我所知道的方法在没有 javascript 的情况下将无法工作。如果背景需要拉伸以填补空白，那么只要内容不改变垂直对齐方式，我就可以提供帮助。这有意义吗？

【解决方案2】：

height:100%; 应该是使其占用可用空间所需的全部内容。

【讨论】：

【解决方案3】：

您可以尝试使用最大或最小高度的 CSS 媒体查询。这里的例子：http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 和文档在这里：http://www.w3.org/TR/css3-mediaqueries/

【讨论】：

由于需要，我必须避免使用 CSS3
那太臭了。我知道人们讨厌表格，但从技术上讲，他们会在这种情况下工作——单元格用于顶部、中间和底部。在这种情况下，中间的单元格总是会向下延伸到底部。