我需要一个Web应用程序的以下布局:
页眉/页脚 始终应在浏览器页面顶部/底部。它们没有固定的高度。
应填充可用空间,并可选择获取滚动条(由#指示)。滚动条不应覆盖整个窗口。
我需要在IE>=7、Chrome和Firefox中实现此功能。
到目前为止,我尝试了不同的div和表格,但它们都失败了,因为我无法使恰好填充可用空间。
更新:和
添加示例:
这应该展示我正在尝试做什么。问题是(除了不起作用:)),'outer' div的高度大于窗口。
+---------------------------------------------+
| header |
+-------------------------------------------+-+
| |#|
| content | |
| |#|
+-------------------------------------------+-+
| footer |
+---------------------------------------------+
到目前为止,我尝试了不同的div和表格,但它们都失败了,因为我无法使
更新:
这应该展示我正在尝试做什么。问题是(除了不起作用:)),'outer' 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>