固定页眉和页脚与动态内容（照片库站点）

我有一个问题，这是困扰着我这些天。我必须做一个布局： 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内）图像

来源

2011-11-04 Lorenzo Pimps

嗨洛伦佐，你有什么问题？你能否尝试多解释一下。 – hairynuggets

所以你想让'.content'填充'.header'和'.footer'之间的空格？ – jackJoe

你想要一个带有滚动固定页眉和页脚和可滚动内容的HTML页面吗？ – buschtoens

首先的内容：如果你有一个独特的元素，如页眉/页脚，请使用id而不是class。 A 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上看看它。

来源

2011-11-04 16:45:34 buschtoens

另一种选择是使用宽度：100％，而不是左和右。你保存一行。 – Nashenas

@Nashenas正确。虽然我更愿意坚持定位，一旦我开始使用它。我想，老习惯很难死。：d – buschtoens

固定页眉和页脚与动态内容（照片库站点）

回答

相关问题