html - 使用 DIV 进行连续布局

Question

<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; }

Answer 1

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