页眉和页脚之间的内容为100％ [英] Content with 100% between header and footer

问题描述

假设我有以下布局（见下图）...我有一个标题（A）在顶部，页脚（C）总是在底部和容器（B）在中间，应该填充标题和页脚之间剩余的空间100％。

Lets assume I have the following layout (see image below)... I have a header (A) at the top, footer (C) that is always at the bottom and container (B) that is in the middle and should fill the space left between the header and the footer by 100%.

无法想到如何使用纯CSS实现这一点。

Can't think of any way how to achieve this using pure css. Any ideas would be appreciated!

推荐答案

根据您的网页设置方式，如果您设置 height：100％; 对于容器元素的（B）和 position：absolute; 。下面是一个示例：

Depending on how your page is set up, it may work if you set height: 100%; for (B) and position: absolute; for the container element. Here is an example:

HTML：

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>​

CSS： p>

CSS:

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}​

jsFiddle

这篇关于页眉和页脚之间的内容为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！