css - 基于屏幕尺寸的页脚高度

Question

我想创建一个与内容相关的页脚(因此不固定)，但会填满屏幕的其余部分。因此，例如，在我的大显示器上，页脚会在同一个地方开始，但会填满 100px(例如)。在较小的显示器上，它只需要填满 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
}

Answer 1

我一直在努力解决类似的问题，我发现解决它的技巧是确保将 body 和 html 设置为 min-height:100%，然后让内容和所有其他 div 等于 100%。

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