Question

我的页面包含＆＃34; 7px标题＆＃34;，＆＃34; 540px内容＆＃34;和页脚我希望页脚高度取决于页面高度更改和页面无滚动。示例

if page height 700px;
footer 153px
or if page height 800px
footer 253px

我能这样做吗？我使用下面的代码，但没有工作

#header{
width:100%;
height:7px;
}
#content{
width:960px;
height:54px;
margin:0 auto 0;
}
    #footer{
        width:100%;
        background-color:#aeb0b3;
        height:100%;
        position: relative;
        bottom:0;
    }

Answer 1

如果您不担心IE8浏览器，那么您可以在CSS中使用calc功能。

  #footer{
    width:100%;
    background-color:#aeb0b3;
    height:calc(100% - 547px);
    position: relative;
    bottom:0;
   }

我希望你已经将body和html元素的宽度和高度设置为100％，如下所示。

 body, html{height:100%; margin:0; padding:0;}

Sample DEMO

自动页脚高度与页面高度

1 个答案: