Question

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

Answer 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 */
}

Answer 2

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

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

请注意，并非所有（即使是现代的）浏览器都支持calc（）

使div扩展到全高 - 30px

2 个答案: