Html 内容可滚动时，页眉和页脚位置固定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18215780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Header and footer with fixed position while content is scrollable?
提问by Michal Artazov
I'm trying to make a website where header and footer have fixed position while content scrolls in the middle.
我正在尝试制作一个网站，其中页眉和页脚具有固定位置，而内容在中间滚动。
<header style="position:fixed"></header>
<div id="content">some content</div>
<footer style="position:fixed"></footer>
I created what I thought would work but it doesn't. Here's jsFiddlewith the whole thing. As you can see, part of content is hidden under the footer and beyond (I can't see 'HELLOWEEN' in the end). What must I change to fix it? Thanx
我创造了我认为会起作用的东西，但它没有。这是jsFiddle的全部内容。如您所见，部分内容隐藏在页脚下方（最后我看不到“HELLOWEEN”）。我必须更改什么才能修复它？谢谢
回答by Nick Tomlin
回答by peterchon
<header>header</header>
<section>
<div class="push">push</div>
</section>
<footer>footer</footer>
html, body {height:100%; margin:0; overflow:hidden;}
header, footer {display:block; background-color:black; height:10%;}
section {height:80%; background-color:lightblue; display:block; overflow:auto;}
section .push {height:4000px;}
回答by Stephen Thomas
- remove the position styles on the header and footer
- set a height on the content
- add a style overflow-y:auto to the content
- 删除页眉和页脚的位置样式
- 在内容上设置高度
- 向内容添加样式 overflow-y:auto
If you want the content height to match the browser window (less the header and footer), use javascript to set it (and adjust on window resize events)
如果您希望内容高度与浏览器窗口相匹配（减少页眉和页脚），请使用 javascript 进行设置（并在窗口调整大小事件上进行调整）
