页眉和页脚之间的内容为100%

Question

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

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

Answer 1

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

也就是说,我假设你想要一个FIXED页脚 - 一个位于浏览器窗口底部的页脚.这是使用多种技术的灵活性,其中一种技术使用绝对定位:

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

样式:

#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/

Answer 2

根据页面的设置方式，如果您height: 100%;为 (B) 和position: absolute;容器元素设置，它可能会起作用。下面是一个例子：

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;
}?

js小提琴

Answer 3

我遇到了这个问题，并认为更“现代”的答案会有所帮助。这种布局很容易使用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;
}