我必须使用 .header 和 .content 进行布局，例如固定高度(例如 100 像素)和 100% 宽度。
然后，我必须放置一个具有覆盖空白空间的动态高度的内容。
<!-- [...] -->
<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>此布局必须允许我放置固定高度的页眉和页脚，以及包含缩放尺寸的图像的内容(在 div.content 内)。
最佳答案
首先:如果您有独特的元素，例如页眉/页脚，请使用 id而不是 class . class用于经常出现或具有某些共同点的元素，这使得对它们进行分组在语义上是正确的，例如描述文本。
现在你的问题。我们必须给出 html和 body总高度为 100%，因此它们不会调整大小，我们可以确定我们将使用整个页面。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
然后您使用了包装器，但我们可以忽略它。 <body>已经是一个包装器。 header和 footer self 解释。
#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 at the top - 100px at the bottom .不可能的？没有。
#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上看一看.
关于html - 如何创建具有动态内容的固定页眉和页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8012235/