这对你们来说应该很容易..
如何仅使用CSS2和HTML从上到下为蓝色背景提供100％的完整高度？ （没有javascript！）当页面包含滚动条时，如果向下滚动，屏幕外部分将变为空白。
复制粘贴此代码，亲眼看看：
<html>
<body>
<div id="mainContent" style="height: 100%; position:absolute; top:0px; left: 50%; right:0px; bottom:0px; background:#06C; z-index:-1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor purus, lacinia tincidunt urna. Duis nec massa vel est dictum sollicitudin. Morbi vestibulum metus quis mi aliquam sagittis condimentum nisi posuere. Donec imperdiet, eros vitae tincidunt sagittis, nisl ipsum tempor nisl, eu dapibus lorem mi vitae lorem. Pellentesque consectetur semper turpis id tincidunt. Aenean eu metus vitae augue rutrum porta. Ut viverra mauris id est sollicitudin at vestibulum leo suscipit. Praesent nibh mi, mattis eu elementum vel, laoreet eu augue. Suspendisse pellentesque enim quis lacus tincidunt lobortis. Etiam pharetra arcu a dui vulputate pretium sit amet id eros. Pellentesque et magna ac metus placerat tristique. Praesent sit amet sem metus. Suspendisse ut arcu quam. Cras magna velit, sollicitudin eu ornare sed, aliquet at velit. Proin purus augue, faucibus in sollicitudin vitae, porttitor sit amet purus. Maecenas tempus congue sodales. Suspendisse tincidunt tempor erat, id faucibus neque iaculis sit amet.</p>
<p>
Phasellus bibendum lorem turpis. Mauris imperdiet mattis sapien, eget blandit urna egestas sit amet. Maecenas tincidunt gravida ullamcorper. Donec pharetra ipsum volutpat justo venenatis vestibulum. Ut lacinia justo sed odio pellentesque in bibendum augue mollis. Aliquam in laoreet lectus. Fusce in lorem vitae augue vulputate consectetur. Phasellus at diam elit, at posuere urna. Nunc pulvinar suscipit fermentum. Vestibulum vel orci enim. Aenean in sollicitudin risus. Quisque turpis leo, placerat at sollicitudin at, molestie et risus. Etiam feugiat, elit nec pellentesque gravida, ligula dolor blandit est, vitae ultrices libero augue vel nibh.</p>
<p>
Suspendisse dignissim posuere eros. Praesent egestas varius nibh sed elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tortor ipsum, pulvinar in vestibulum ut, porta nec nisi. Vivamus mi purus, convallis vitae suscipit at, consectetur vel justo. Vivamus erat neque, luctus accumsan dictum eget, consectetur vitae ligula. Nunc eget orci ut felis suscipit porta. Cras tincidunt lectus ut massa facilisis ullamcorper accumsan velit ultricies. Sed ullamcorper leo eget elit molestie interdum. Cras sollicitudin mattis orci, in porttitor augue accumsan ac. Suspendisse potenti. Nunc semper purus nec arcu iaculis placerat. Vestibulum sed neque ligula, eget cursus arcu.</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ante sem, porttitor in venenatis eget, egestas ultricies arcu. Nullam lacinia vehicula dui, sed bibendum lacus interdum vestibulum. Donec sagittis lectus eget nulla blandit at ornare purus faucibus. Vivamus quis augue in neque viverra posuere quis vitae mauris. Proin a felis sapien. Aenean sed felis nulla, non molestie metus. Etiam bibendum commodo blandit. In aliquet, dui vel tempor mollis, sem mauris interdum dolor, eu aliquam augue sem eget mauris. Ut ipsum nulla, vestibulum quis feugiat ac, sollicitudin et est. Nunc et massa vitae arcu pulvinar porta. Sed elementum egestas adipiscing. Sed quis quam id odio eleifend rutrum. Ut libero nulla, auctor eget pellentesque in, placerat non lorem. In fermentum velit eu augue hendrerit rutrum. Donec adipiscing pretium justo, id iaculis metus scelerisque a. Mauris pretium volutpat justo, non pellentesque eros blandit et. Vestibulum tristique interdum erat volutpat molestie. Nullam pretium dictum nulla quis facilisis. Sed massa libero, lacinia ac volutpat non, pharetra non lorem.</p>
<p>
Donec gravida neque eu ante dapibus in suscipit nisi pellentesque. Cras egestas faucibus mi nec adipiscing. Donec sodales nunc sit amet augue egestas sed suscipit dui accumsan. In libero risus, blandit ut semper id, volutpat ullamcorper felis. Quisque vitae tortor mauris, ut venenatis turpis. Donec tristique cursus lacinia. Etiam vel odio dolor. Duis posuere mattis semper. Ut euismod mattis luctus. Donec pellentesque euismod purus, vel rhoncus turpis tincidunt sit amet. In vitae libero turpis. Aliquam suscipit suscipit feugiat. Mauris eu magna enim, sit amet egestas diam. Praesent nibh turpis, ultricies a dapibus in, posuere et dui. Pellentesque pellentesque augue a est aliquet ut tincidunt augue pulvinar. Nam vel lacus erat. Praesent id dolor sapien. </p>
<p>
Donec gravida neque eu ante dapibus in suscipit nisi pellentesque. Cras egestas faucibus mi nec adipiscing. Donec sodales nunc sit amet augue egestas sed suscipit dui accumsan. In libero risus, blandit ut semper id, volutpat ullamcorper felis. Quisque vitae tortor mauris, ut venenatis turpis. Donec tristique cursus lacinia. Etiam vel odio dolor. Duis posuere mattis semper. Ut euismod mattis luctus. Donec pellentesque euismod purus, vel rhoncus turpis tincidunt sit amet. In vitae libero turpis. Aliquam suscipit suscipit feugiat. Mauris eu magna enim, sit amet egestas diam. Praesent nibh turpis, ultricies a dapibus in, posuere et dui. Pellentesque pellentesque augue a est aliquet ut tincidunt augue pulvinar. Nam vel lacus erat. Praesent id dolor sapien. </p>
</body>
</html>
答案 0 :(得分：4)
为父元素提供position: relative属性。
因此，在您的情况下，请为body元素提供此属性：
body {
position: relative;
}
DEMO： http://jsfiddle.net/marcuswhybrow/wNbgG/
P.S。除非绝对必要，否则不要使用style属性，否则会导致无法管理的代码。您应该更喜欢使用CSS规则。