3

我想<div>在我的网页上使用三个区域：Header、Content和Footer。

页脚 <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;
}

现在我希望Content <div>正好是Header和Footer之间的 ViewPort 的剩余高度，而不添加任何 JavaScript，无论以后将什么内容添加到Content <div>。

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

4

2 回答 2

5

如果 和 的大小footer已知header，则可以使用calc(). 因此，假设两者100px结合在一起，这应该可行：

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

但请注意，旧浏览器不支持此功能。还可以查看兼容性表以了解可能需要的前缀。

示例小提琴

于 2013-04-14T13:06:54.720 回答
1

你可以使用这样的东西。它将允许您将您的位置保持在一系列分辨率中。

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

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

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

在这里查看

于 2013-04-14T13:11:36.337 回答