页脚高度基于屏幕大小

时间:2010-05-09 03:41:02

标签: css resolution footer relative

我想创建一个与内容相关的页脚(因此不固定),但填充屏幕的其余部分。例如,在我的大显示器上,页脚将在同一个地方开始,但填充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
}

感谢您的任何想法

1 个答案:

答案 0 :(得分:3)

我正在努力解决类似问题,我发现解决问题的方法是确保将body和html设置为min-height:100%以及然后将内容和所有其他div等于100%。

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