我的网络应用程序需要以下布局:
+---------------------------------------------+
| header |
+-------------------------------------------+-+
| |#|
| content | |
| |#|
+-------------------------------------------+-+
| footer |
+---------------------------------------------+
页眉/页脚 应始终位于浏览器页面的顶部/底部。它们没有固定的高度。
内容 应填充可用空间并可选择获得滚动条(由 # 指示)。滚动条不应覆盖整个窗口。
我需要这个才能在 IE>=7、Chrome 和 Firefox 中工作。
到目前为止，我尝试了不同的 div 和表格，但它们都失败了，因为我无法让 content 完全填充可用空间。
更新: header 和 footer 的高度应该由它们自己的内容决定(例如，header 可能包含一个菜单，footer 是一个由 javascript 设置的通知)。
添加示例:
这应该表明我正在尝试做什么。问题是(除了不起作用 :))是“外部”div 的高度大于窗口。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<script src="../lib/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.header { width: 100%; background-color: red; }
.footer { width: 100%; background-color: blue; }
.content { overflow: auto; height: 100%; }
</style>
<script type="text/javascript">
$(function ()
{
$("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
$("#toggle").click(function () { $("#text").toggle(); });
});
</script>
</head>
<body style="height: 100%">
<div id="outer" style="height: 100%">
<div class="header">
header <a id="grow" href="#">grow</a>
</div>
<div class="content">
<h3>
Lorem:</h3>
<p>
<a id="toggle" href="#">toggle</a>
</p>
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras
interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat
mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus.
Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus
sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim.
</p>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
最佳答案
抱歉，没有使用您的代码，但这是我认为您想要完成的工作的基本概述。
<!DOCTYPE html>
<head>
<style type="text/css">
html {
min-height: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.wrap {
width: 900px;
margin: 0 auto 0;
padding: 0;
}
.head {
width: 900px;
background: black;
color: white;
min-height: 20px;/* just for example */
display: block;
position: fixed;
z-index: 1000;
top: 0;
}
.content {
width: 900px;
background: gray;
color: black;
height: 100%;
display: block;
overflow-y: auto;
margin: 20px 0 20px 0; /* top and bottom margins must be the height of your header/footer, respectively */
}
.footer {
width: 900px;
background: black;
color: white;
min-height: 20px;
display: block;
position: fixed;
bottom: 0;
z-index: 1000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<!-- your header content-->
test
</div>
<div class="content">
<!-- main content, scrollable -->
test
</div>
<div class="footer">
<!-- your footer content -->
test
</div>
</div>
</body>
</html>
在我看来，您并没有尝试使用粘性页脚，因此您可以只使用 position: fixed; bottom: 0把它放在那里。
因为你正在设计你的 <div id="outer">高度/最小高度为 100%，它从父元素导出它的高度，所以这就是你获得滚动条的原因。 html, body {overflow: hidden}照顾那个。
对于您的内容，添加 overflow-y: auto
唯一棘手的部分是您必须有边距顶部和底部声明，这样您的内容就不会被页眉和页脚重叠。也许一些 javascript 可以动态选择您的页眉/页脚高度并将它们添加到您的内容边距。
这越来越近了吗？
关于html - 带有滚动条的页眉、页脚和内容的 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3871678/