Question

我想在我的网页上使用三个<div>区域：标题，内容和页脚。

页脚 <div>应该贴在网页的底部。

标题 <div>应该贴在页面顶部。

内容 <div>应该填充页面中间的整个区域。

所以这是基本布局：

<body>
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</body>

为了让页脚保持在页面上，我添加了

#footer
{
  position: fixed;
  bottom: 0;
}

对于内容 <div>我正在使用背景图片，精确缩放到div元素的尺寸：

#content
{
  background: url("Bilder/Bild.png") center contain no-repeat black;
}

现在我希望内容 <div>正好是标题和页脚之间ViewPort的剩余高度，而不添加任何内容JavaScript，无论以后将哪些内容添加到内容 <div>。

我怎么能在CSS3中做到这一点？

Answer 1

如果已知footer和header的尺寸，您可以使用calc()。因此，假设两者都采用100px，这应该有效：

html, body { height: 100%; }
#content {
  height: calc( 100% - 100px );
}

请注意，旧浏览器不支持此功能。另请查看compatibility table可能需要的前缀。

Example Fiddle

Answer 2

你可以用这样的东西。它可以让你保持一系列分辨率的位置。

#header {
    position: fixed;
    height: 10%;
}

#content {
    position: fixed;
    height: 80%;
    top: 10%;
}

#footer {
    position: fixed;
    bottom: 0px;
    height: 10%;
}

查看here

CSS3：如何将中间DIV设置为最大高度？

2 个答案: