基于屏幕尺寸的页脚高度答案

【问题标题】：Footer height based on screen size基于屏幕尺寸的页脚高度
【发布时间】：2010-05-09 03:41:02
【问题描述】：

我想创建一个与内容相关的页脚（因此不固定），但会填充屏幕的其余部分。因此，例如，在我较大的显示器上，页脚将从同一个位置开始，但填充 100 像素（例如）。在较小的显示器上，它只需要填满 75px。我尝试使用 100%，但它会导致页面非常大，用户可以向下滚动并用页脚填充整个屏幕。有没有办法让它变得更合理一些，让它刚好填满屏幕的底部？我目前的代码是这样的：

.footer
{
    position:relative; //can't be fixed as content might overlap if extended    
    height:100%;
    width:100%; //fill the entire screen horizontally
    bottom:0px;
    margin-top:345px; //used to make sure content doesn't overlap
}

【问题讨论】：

你知道，如果你只是把内容放在你的页面上，你就不必担心它下面的页脚......如果没有内容，为什么人们会担心页面的外观？如果没有内容，人们一开始就不会关心。
对不起，我不明白？我确实有内容。在该内容下方，我想要一个页脚。页脚从内容下方开始（高度会发生变化）并且必须到达底部（这样它就不仅仅是页面中间的一个栏）。

标签： css css-position footer screen-resolution

【解决方案1】：

我正在为类似的事情苦苦挣扎，我发现解决它的技巧是确保将 body 和 html 设置为 min-height:100%，然后让内容和所有其他 div 等于 100%。

html {
    min-height: 100%;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}
#content {  
    min-height: 100%;
}

【讨论】：