Question

我有一个基于div的布局：

<div id="master">
 <div id="header">Header</div>
 <div id="menu">Menu</div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>`

所有垂直对齐。

HTML，身高100％同样适用于主div。当我将内容div设置为100％时，它会扩展并给我滚动条。

我的目标是让内容div填补其余部分。将页脚放到底部和标题＆amp;菜单在上面。

我似乎无法实现这一点。

任何帮助？

Answer 1

我想这是你body的{{1}}或margin。尝试重置它们：

padding

小提琴：http://jsfiddle.net/Cj8YV/1/

Answer 2

如果您搜索“向下推脚”，您会找到许多有用的答案，例如：How do you get the footer to stay at the bottom of a Web page?

如果您的页脚高度已修复，请尝试重构HTML代码，如下所示：

HTML

<html>
<head>...</head>
<body>
<div class="wrapper">
header, content and menu goes here
<div class="push"></div>
</div>
<div class="footer">footer</div>
</body>
</html>

CSS

包含以下CSS（我从链接的答案中复制了代码并添加了一些背景颜色，因此可以轻松测试）：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    background: red; /* demo */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
.footer {
    background: blue; /* demo */
}

Div高度让我发疯

2 个答案:

小提琴：http://jsfiddle.net/Cj8YV/1/

HTML

CSS