0

有没有一种简单的方法，只用 css 就可以让 div 扩展到页面的整个高度 - 30px。我在页面底部有一个 30 像素高的“页脚”，并设置为position: fixed; bottom: 0px;我不希望页面其余部分的任何内容显示在此页脚后面。

4

2 回答 2

1 
<body>
<div id="wrapper">
    <div id="header">Header added just for demonstration purposes</div>
    <div id="content">Main content goes here</div>
    <div id="footer">And this is my footer</div>
</div>

现在的风格

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

 #wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative; /* Required to absolutely position the footer */
 }

#footer {
    height: 50px; /* Define height of the footer */
    position: absolute;
    bottom: 0; /* Sit it on the bottom */
    left: 0;
    width: 100%; /* As wide as it's allowed */
}

#content {
    padding-bottom: 50px; /* This should match the height of the footer */
}
于 2013-04-25T17:07:52.623 回答
0

我可能会将所有内容放在一个包装器中并将大小设置为 100%，

但是在新的 css3 中，你有 calc() 可以满足你的需要：http ://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc

请注意，并非所有（甚至是现代）浏览器都支持 calc()

于 2013-04-25T17:02:10.710 回答