我有一个基于 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 填写其余部分。将页脚放在底部，将页眉和菜单放在顶部。
我似乎无法做到这一点。
有什么帮助吗？
如果您搜索“push footer down”，您会发现许多有用的答案，例如：如何让页脚留在网页底部？
如果您的页脚高度是固定的，请尝试重组 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（我从链接的答案中复制了代码并放入了一些背景颜色，因此可以轻松测试）：
* {
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 */
}
我猜这是你body的marginor padding。尝试重置它们：
#master {padding-top: 0; padding-bottom: 0; overflow: auto;}