html 的页眉页脚,html – 带滚动条的页眉,页脚和内容的CSS布局

我需要以下webapp布局：

+---------------------------------------------+

| header |

+-------------------------------------------+-+

| |#|

| content | |

| |#|

+-------------------------------------------+-+

| footer |

+---------------------------------------------+

页眉/页脚应始终位于浏览器页面的顶部/底部.它们没有固定的高度.

内容应填充可用空间,并可选择获取滚动条(以#表示).滚动条不应覆盖整个窗口.

我需要这个在IE> = 7,Chrome和Firefox中工作.

到目前为止,我尝试了不同的div和表,但它们都失败了,因为我无法获得完全填充可用空间的内容.

更新：

页眉和页脚的高度应由其自己的内容确定(例如,标题可能包括菜单,页脚由javascript设置的通知).

添加样本：

这应该显示我想要做的事情.问题是(除了不工作:))是’外部’div的高度大于窗口.

.header { width: 100%; background-color: red; }

.footer { width: 100%; background-color: blue; }

.content { overflow: auto; height: 100%; }

$(function ()

{

$("#grow").click(function () { var a=$("

test

").hide(); $(".header").append(a); a.slideDown(); });

$("#toggle").click(function () { $("#text").toggle(); });

});

header grow

Lorem:

toggle

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.

footer