Question

我对这些困扰我的问题有疑问。我必须做一个布局： a .header和.content，如固定高度（例如100px）和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内）

Answer 1

首先：如果您有一个独特的元素，例如页眉/页脚，请使用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 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上查看。

修复了包含动态内容的页眉和页脚（照片库网站）

1 个答案: