如何创建带有动态内容的固定页眉和页脚？

Question

如何创建带有动态内容的固定页眉和页脚？

3

我需要制作一个布局，其中包含一个高度固定（例如100px）且宽度为100%的 .header 和 .content。

然后，我需要放置一个动态高度的内容，以填充空白区域。

<!-- [...] -->
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
  
  .wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .header {
    position: absolute;
    top: 0;
    height: 100px;
    width: 100%;
    background: #0F0;
  }
  
  .footer {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: #0F0;
  }
  
  .content {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #F00;
    padding: 100px 0;
    margin: -100px 0;
  }
</style>
</head>

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
  </div>

</body>

</html>

这个布局必须允许我放置一个具有固定高度的页眉和页脚，以及一个可以缩放尺寸的图像内容（在

中）。

- Lorenzo Pimps

嗨，Lorenzo，你遇到了什么问题？你能否尝试更详细地解释一下。 - hairynuggets

你想让.content填充在.header和.footer之间的空间吗？ - jackJoe

你想让滚动条出现在哪里？在 .content 还是在 html 中？ - buschtoens

我不想让滚动条出现。我会用JavaScript（或只用两个箭头...）来实现。 - Lorenzo Pimps

你想要整个页面都采用那种风格设计，还是只需要一个展示/包装？ - buschtoens

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- buschtoens · Accepted Answer

首先需要注意：如果您有一个独特的元素，例如页面的页头或页脚，请使用id而不是class。class用于经常出现或具有共同点（如描述文本）的元素，以便对它们进行语义分组。

现在来看您的问题。我们需要为html和body设置总高度为100％，这样它们就不会被调整大小，我们可以确保使用整个页面。

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

你随后使用了一个包装器，但我们可以省略它。 <body> 已经是一个包装器了。 header 和 footer 自我解释。

#header {
    height: 100px;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    background: #0F0;
}
#footer {
    height: 100px;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: #0F0;
}

content 有点棘手。它需要扩展到 100% - 顶部 100px - 底部 100px。不可能吗？不是。

#content {
    position: absolute;

    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;

    overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */

    background: #F00;
}

完成。您可以在jsFiddle上查看。