css - 自动页脚高度与页面高度

标签 css

我有一个包含“7px header”、“540px content”和页脚的页面 我希望页脚高度取决于页面高度变化和页面无滚动。 例子

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;
    }

最佳答案

如果你不担心 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

关于css - 自动页脚高度与页面高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25114035/

相关文章:

javascript - -webkit-transform 在 chrome 中的性能问题

html - CSS 位置未按预期工作。如何解决?

html - 样式 SegmentedButton Sencha

css - Frames:去除IE中的外边框;背景透明度

css - Deviant Art 如何让他们的动态图像在 IE6 上垂直居中?

html - 图标字体 : use bigger font-size (inline-element) without affecting line-height

css - html 在不拉伸(stretch) Canvas 的情况下在 div 中居中 Canvas

html - 如何仅将背景颜色添加到主要元素而不是 :before and :after

html - 为什么特异性公式不适用于十个封闭标签?

html - col-sm-4 不适合三列