是否可以在没有 JavaScript 的情况下执行此操作（html 布局）答案

【问题标题】：Is it possible to do this without JavaScript (html layout)是否可以在没有 JavaScript 的情况下执行此操作（html 布局）
【发布时间】：2013-03-16 08:58:44
【问题描述】：

页面布局如下：

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

【问题讨论】：

我的朋友，这是一个古老的问题。
Chuck Norris 不会编写 JavaScript，JavaScript 修复了它的 this 语义并请求 Chuck Norris 原谅。
Chuck Norris 只需在纯 html 中输入 (content.height = main.height - (header.height + footer.height)) 即可。
@Christoph Chuck Norris 什么都不做。 HTML 页面只是做 Chuck Norris 想做的事情。

标签： javascript html

【解决方案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）。

【讨论】：

在你的情况下，页脚和页眉有一个固定的高度，我需要他们根据需要采取尽可能多的高度，页眉和页脚的内容可以改变，高度也应该如此
不，只有#foooter 有固定的高度，#header 会和它的内容一样高，#content 会简单地向下移动。也许我应该在 CSS 中编辑关于 #header 的评论。
所以不可能让他们都拿走他们需要的那么多，而#content 剩下的
你说“是否有可能让页脚和页眉的高度达到他们需要的高度” - 它不等同于“没有固定高度”。在这种情况下，当你想让#header 和#footer 具有弹性时，也许没有纯CSS 的解决方案——至少我现在不知道。

【解决方案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 的布局范围内。

【讨论】：

【解决方案3】：

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

【讨论】：