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