如何在 CSS 中将导航和内容区域的高度拉伸到 100%？答案

【问题标题】：How can I stretch my navigation and content area height to 100% in CSS?如何在 CSS 中将导航和内容区域的高度拉伸到 100%？
【发布时间】：2012-07-20 21:20:32
【问题描述】：

如果您转到http://ffmages.com/final-fantasy-tactics（例如），您会注意到页脚部分显示在导航和内容区域的后面。我想让导航和内容以 100% 的高度拉伸，并且页脚保持在屏幕底部。

以下是我用于页眉、菜单、内容和页脚部分的 CSS：

#container {
    width: 1000px;
    height: 100%;
    background-image: url(/images/background.gif); 
    margin: 0 auto;
}

#header {
    width: 1000px; 
    height: 98px;
    background-image: url(/images/header.jpg);
    background-repeat: no-repeat;
}

#primary {
    float: left; 
    width: 167px;
    height: 798px;
    text-align: left;
    padding-bottom: 14px;
    background-image: url(/images/nav-bg.jpg); 
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    margin: 0px;
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
}

#content {
    float: right;
    width: 810px; 
    height: 100%;
    text-align: left;
    background-color: #FFFFFF; 
    border-top: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    padding: 10px;
    line-height: 1.5em; 
    margin: 0px;
}

#footer {
    clear: both;
    width: 998px;
    height: 18px;
    font-size: 7pt;
    color: #FFFFFF;
    text-align: center;
    background-color: #07162A;
    background-image: url(/images/footer-bg.jpg);
    border-top: 1px #000000 solid;
    border-left: 1px #000000 solid;
    border-right: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    padding-top: 6px;
    padding-bottom: 1px;
}

感谢任何帮助。谢谢！

【问题讨论】：

你的 HTML 是什么？你能做一个 JSFiddle 吗？
对不起，我不熟悉 JSFiddle。你如何创建一个？
JSFiddle.net。将您的 HTML 放在左上角，将 CSS 放在右上角，然后单击“运行”。右下角将显示输出。点击“保存”并发布网址。
jsfiddle.net/LNbfa 适合你吗？

标签： css html height

【解决方案1】：

很难说没有 div 层次结构。

只是在这里吐口水，但您可以这样设置 div 结构。

---------------------------------------------
|                  HEADER                   |
---------------------------------------------
|      |                                    |
|      |                                    |
|      |                                    |
| NAV  |           BODY                     |
|      |                                    |
|      |                                    |
|      |                                    |
---------------------------------------------
|                  FOOTER                   |
---------------------------------------------

NAV 实际上包含在 BODY 中。当 BODY 或 NAV 垂直扩展时， FOOTER 将相应地被推动。为了让页脚与浏览器窗口的底部齐平，您必须使用边距和填充。

【讨论】：

【解决方案2】：

所有你应该做的（基于给出的例子是应用两个属性到你的 CSS

position: fixed;
bottom: 0;

一旦这两个都应用了，你的页脚应该总是在页面的底部，不管你设置它有多宽......在你的情况下998px

【讨论】：

这不是我希望做的。此代码使页脚固定，并且当您滚动时，它会停留在那里。我只是想确保页脚保持在页面底部。
@OmarHachem 你想要它在页面底部还是你想要它在内容下方？如果您希望它位于页面底部，请参阅我的 css 更改。如果您只是希望它始终位于您的内容下方，请参阅页面布局的 jskiles1 描述。这将被布置为... <body><div id="header"></div><div id="content"><div id="nav"></div><div id="body"></div></div><div id="footer"></div></body>