带有DIV的连续布局

如何解决带有DIV的连续布局

|

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

当屏幕大小正常时，此代码可以很好地工作。但是在全屏模式下，页脚转到页面底部（不需要的行为），但是\'\'middle \'\'div必须增加其高度才能获得页脚。我的意思是，这三个元素（内容，中间和页脚）必须是连续的。 我应该使用哪些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; }

    

解决方法

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

height:100%;

应该是占据可用空间所需的全部。     ,坏消息：老实说，队友，我认为使用这种精确的规范是不可能的。无论如何，这将需要一些非常聪明的CSS。但是，表会很好地工作。我完全反对这个想法，但是如果必须满足此设计要求，那么也许应该走这条路。 好消息：根据您为什么需要它们保持流畅，我们也许可以提供理想的效果。如果只是为了配合背景，我们可以这样做。使用更多信息更新您的信息，我（希望）通过答案更新我的信息。