页眉和页脚之间的内容为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%.

让我们假设我有以下布局(见下图)...我在顶部有一个标题(A),页脚(C)总是在底部,容器(B)在中间,应该填充页眉和页脚之间留有100%的空间。

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

想不出怎么用纯css来实现这个目的。任何想法,将不胜感激!

3 个解决方案

#1

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:

根据您的页面设置方式,如果设置高度可能会有效:100%; (B)和位置:绝对;对于容器元素。这是一个例子:

HTML:

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

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

#2

Your question pretty much describes how standard block-level elements, such as DIVs, behave. The center div will always take up 100% of the space between the two, and it'll grow based on it's inner content.

您的问题几乎描述了标准块级元素(如DIV)的行为方式。中心div总是占据两者之间100%的空间,它将根据它的内在内容而增长。

That said, I'm going to assume you want a FIXED footer - one that stays positioned at the bottom of the browser window. This is achiavable using a number of techniques, one of which is using absolutly positioning:

也就是说,我假设您想要一个FIXED页脚 - 一个位于浏览器窗口底部的页脚。这是使用多种技术来实现的,其中一种技术是使用绝对定位:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

Style:

#header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }​

http://jsfiddle.net/U9wfy/

#3

I came across this question and thought a more "modern" answer would be helpful. This layout is easy using flexbox..

我遇到了这个问题,并认为更“现代”的答案会有所帮助。这种布局很容易使用flexbox ..

https://www.codeply.com/go/1QgRb4uFmj

<header>
</header>
<main></main>
<footer>
</footer>

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
  background: #ddd;
}

main {
  overflow-y: scroll;
  flex: auto;
}