Question

该页面具有以下布局：

<div id="main" style="min-height:500px;"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

主div可以有固定的高度或最小高度（style="height:500px;"或style="min-height:375px;"）。

是否可以使页脚和页眉占用所需的高度，并允许内容休息(content.height = main.height - (header.height + footer.height))（不使用JavaScript，弹性页眉和页脚，其余内容采用其他内容）？

Answer 1

是的，可能。

HTML：

<div id="main"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for #main min-height */
}

div#main {
    position: relative; /* needed for footer positioning */
    height: auto !important; /* real browsers */
    height: 500px; /* IE6: treated as min-height*/
    min-height: 500px; /* real browsers */
}

div#header {
    /* Will be as high as its content */
}

div#content {
    /* Will be displayed below #header regardless to its height */
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */
}

div#footer {
    position: absolute;
    width: 100%;
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */
    bottom: 0; /* stick to bottom */
}

这实际上并未设置#content高度，但会显示所有内容（#main具有预期高度，#footer位于底部且未覆盖#content）。

Answer 2

我找到的唯一解决方案（在IE6 / 7中无法正常工作）......

<table height="500" cellpadding="0" cellspacing="0" border="0">
    <tr height="1"><td>Header goes here</td></tr>
    <tr><td>Main content goes here</td></tr>
    <tr height="1"><td>Footer goes here</td></tr>
</table>

关键点是为顶行和底行设置一个较小的高度，而不是为中间行设置任何高度。这样可以鼓励浏览器将顶行和底行保持尽可能小，并使用中间行来占用任何未使用的空间。但是IE6 / 7忽略了这一点，并试图在所有3行上均匀地分散未使用的空间。

尽管如此，如果不使用JavaScript（或者添加某种特定于IE的CSS表达式（即动态属性）），这可能是最接近的，我不建议这样做。

HTML表是唯一可以在不使用JavaScript的情况下控制垂直布局（大小和对齐）的选项。如果这就是您所需要的，那么HTML表就是您的选择。但是你可能最好不要使用基于CSS的布局限制。

Answer 3

简单地使用CSS页脚需要具有固定大小。

没有JavaScript（html布局）可以做到这一点吗？

3 个答案: