12

该页面具有以下布局：

<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，弹性页眉和页脚，内容占据其余部分）？

4

3 回答 3

3

是的，这是可能的。

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

于 2012-06-06T10:40:45.623 回答
1

我找到的唯一解决方案（在 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 的布局的限制内。

于 2012-06-06T14:47:48.867 回答
0

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

于 2012-06-06T10:34:49.473 回答