这是JSFiddle上的演示链接
CSS文件：
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%; background-color:green}
header {margin-top:-50px; height:50px; background-color:red;}
footer {margin-bottom:-50px; height:50px; background-color:red;}
HTML：
<div id="wrapper">
<header>header text</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ligula justo, et varius mauris. Vivamus eleifend feugiat tortor ut egestas. Donec risus diam, vestibulum ut pharetra vitae, scelerisque quis tellus. Fusce pharetra, diam ut facilisis scelerisque, magna nisl viverra lectus, vel malesuada erat odio nec quam. Sed placerat tellus et turpis rhoncus semper. Sed at molestie turpis. Duis purus dui, ornare ut tristique nec, aliquet et purus. Mauris ullamcorper accumsan elit, vel semper justo accumsan non. Aliquam viverra metus nibh. Maecenas tempus, sapien eu semper pellentesque, lacus nisi venenatis purus, id pretium justo ipsum ac lorem.</p>
<p>Donec auctor enim eu ligula congue quis rutrum ipsum dictum. Phasellus hendrerit, libero ultrices tristique vulputate, urna nunc blandit urna, vel vulputate urna nibh sit amet massa. Mauris erat nisl, rutrum vel rutrum et, feugiat eget diam. Morbi facilisis magna a sem consequat mattis. Sed et ante dolor, nec vulputate nibh. Sed tristique convallis purus quis fringilla. Aenean nec justo vitae dui elementum egestas sit amet et lorem. Praesent hendrerit adipiscing lectus. Nullam varius vulputate arcu, sed iaculis est accumsan sit amet. Vestibulum fringilla, est eget feugiat pretium, elit odio rhoncus mauris, non lacinia velit mi eu turpis. Quisque velit neque, ultrices at adipiscing a, porttitor ut tortor. Integer commodo sapien quam. Duis convallis, arcu adipiscing lacinia pharetra, nisi velit accumsan sapien, quis fermentum ante sapien et orci.</p>
<p>Donec elit odio, tincidunt id pulvinar et, rutrum a est. In non nunc lectus. Proin adipiscing auctor condimentum. Nulla metus sem, faucibus id aliquet et, faucibus nec nibh. Morbi erat leo, ultricies sit amet venenatis vitae, pretium semper sapien. Aliquam convallis ipsum nec lacus iaculis eu tincidunt dui ultricies. Pellentesque dictum molestie ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse scelerisque fringilla nibh, at molestie magna mattis sed. Aenean rhoncus lectus vitae justo viverra eget rhoncus lectus malesuada. Nullam tortor tortor, molestie et commodo eget, pharetra ut odio. Mauris gravida nunc et eros imperdiet blandit. Aenean sed tellus dolor, eget fermentum mauris. Vivamus pulvinar iaculis nisi sed interdum. Proin commodo odio in felis tempus consectetur. Sed pretium, odio non hendrerit placerat, justo eros varius diam, sit amet hendrerit mauris augue sit amet tortor.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non odio libero, id ultrices quam. Nam dictum ligula in tellus condimentum dignissim. Duis dignissim pellentesque pretium. Curabitur tincidunt urna vitae sapien pulvinar ut auctor mi tempus. In ultricies mollis commodo. Pellentesque vitae odio id ligula dapibus porttitor id et nunc. Phasellus dui libero, posuere egestas lobortis ut, vestibulum sed nulla. Nullam vel orci enim. Proin felis ligula, vulputate eget consectetur vitae, malesuada vitae tortor. Quisque congue lobortis iaculis. Suspendisse dictum eleifend mi a malesuada. Morbi dictum dui sit amet magna luctus posuere. Nam sed sem sed justo faucibus consequat quis nec mi.</p>
<p>Pellentesque non augue non turpis condimentum vehicula vel hendrerit diam. Nam mi magna, pharetra et euismod sed, tincidunt at est. Nullam dui purus, convallis a volutpat eget, consectetur quis enim. Sed porttitor urna at lorem dignissim ornare. Nunc a ipsum vulputate ipsum elementum tristique. Morbi in tellus volutpat massa gravida accumsan. Nullam hendrerit condimentum nunc eu ultrices. Ut nisi neque, mattis sed tristique eget, commodo vitae nulla. In vel mi nulla. Ut luctus, augue non sagittis mattis, magna elit laoreet nibh, pharetra tincidunt tellus augue vel sapien. Morbi in dolor eget turpis elementum cursus porta in urna. Ut a libero tortor. Donec luctus tempor sem nec fermentum. Cras ac massa tellus. Aliquam ultrices orci dapibus sem sagittis gravida.</p>
</div>
<footer>footer text</footer>
</div>
我需要将页眉和页脚固定在顶部和底部，只有 div 内容可滚动。有谁知道我怎么可能做到这一点并使其滚动条仅显示在页眉和页脚之间而不是它们上方？