This should be an easy one for you guys..
How can I give the blue background a full 100% height from top to bottom by only using CSS2 and HTML ? (no javascript!) When the page contains a scrollbar the offscreen part will go blank if you scroll down.
Copy paste this code, and see for yourself:
<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>
Give the parent element the
position: relativeproperty.So in your case, give the
bodyelement this property:DEMO: http://jsfiddle.net/marcuswhybrow/wNbgG/
P.S. Don’t use the
styleattribute unless absolutely necessary, it leads to unmanageable code. You should prefer using CSS rules instead.