Few Simple CSS Solutions Oct 3rd, 2012 | Comments CSS only I like bl.ocks.org very much, it’s brilliant idea! Sticky header and footer with scrollable content <!DOCTYPE html> <meta charset="utf-8"> <style> * { font-family: Arial, sans-serif; font-size: 1em; } body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .containter { background: #0fffff; overflow: auto; top: 4em; bottom: 6em; position: fixed; margin-right: 14em; } .list li { border-bottom: 1px solid #green; } .header { height: 4em; width: 100%; left: 0; top: 0; position: absolute; background: #d2d2d2; } .footer { position: absolute; left: 0; bottom: 0; color: #ffffff; background: #303030; width: 100%; height: 6em; } .right-box { position: fixed; right: 0; width: 14em; top: 4em; bottom: 6em; background: #20238e; color: #ffffff; } .header p, .right-box p, .footer p { padding-left: 1em; font-weight: bold; } #lipsum { padding: 1em; } </style> <body> <div class="containter"> <div id="lipsum"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa et turpis scelerisque et laoreet dolor vulputate. Suspendisse potenti. Pellentesque sagittis purus eget turpis pellentesque commodo. Curabitur malesuada, turpis a lobortis ultricies, nulla leo fermentum neque, mollis pellentesque nunc nisi a sapien. Cras nisl nisl, ullamcorper sed ultrices eget, imperdiet quis leo. Vestibulum rhoncus suscipit dui at iaculis. Fusce elementum dui ac orci scelerisque vel auctor nulla convallis. Vestibulum tempor odio et justo pretium porta. </p> <p> Duis diam nisl, auctor ut pharetra non, adipiscing consequat sem. Donec mauris magna, consequat quis sodales vel, pulvinar ac mauris. Donec vulputate porttitor libero sed imperdiet. Vivamus ut ipsum eget tortor aliquam molestie. Maecenas ut metus non velit posuere malesuada. Sed et sapien nulla. Praesent augue ante, placerat eu euismod sit amet, rhoncus vel nibh. Etiam ullamcorper elit purus, quis fringilla ipsum. Aliquam erat volutpat. Pellentesque sed nisl et orci tristique gravida. Quisque a sem est, viverra egestas velit. Nam ornare sem felis. Aenean bibendum mi a leo condimentum pulvinar. Aenean congue risus nec magna elementum hendrerit et sed metus. Vestibulum a nisi ante, quis fringilla ligula. Nullam convallis orci in lectus hendrerit fermentum. </p> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac magna odio, ac egestas felis. In imperdiet, nibh a posuere elementum, massa orci mattis justo, quis elementum sapien quam aliquet odio. Pellentesque et leo quis velit pellentesque tristique sed id ipsum. Nulla fringilla felis porttitor arcu tristique congue. Proin nunc ligula, mollis sit amet luctus nec, luctus vel orci. Sed eget leo a ante iaculis vehicula ut id purus. Aliquam congue dictum vehicula. Integer in nulla tortor. Sed erat leo, vulputate quis malesuada eget, porta ac risus. Donec in risus ante. Sed pharetra diam non purus lacinia iaculis. </p> <p> Suspendisse quis arcu quis ligula fringilla ultricies. Phasellus sed turpis at justo iaculis condimentum. Cras sodales consectetur libero, non malesuada nunc volutpat at. Praesent commodo eleifend nunc ut facilisis. In hac habitasse platea dictumst. Nam ut magna in dolor molestie accumsan vel nec enim. Maecenas nisl sem, cursus a eleifend a, aliquet id magna. Aliquam erat volutpat. Proin tristique euismod massa, at suscipit arcu fringilla eu. Phasellus mollis tristique eleifend. Praesent dapibus felis sit amet felis semper eget dapibus augue dapibus. Mauris dapibus feugiat neque nec laoreet. Duis congue magna a nulla porttitor volutpat. </p> <p> Nullam pharetra scelerisque mattis. Aenean congue libero sollicitudin ligula rhoncus adipiscing. Morbi non condimentum velit. Curabitur quam ante, lobortis at aliquam eget, convallis eget ipsum. Ut vestibulum lacus ac erat euismod commodo. Praesent purus risus, congue sed convallis at, laoreet non augue. Nullam urna odio, pretium quis sagittis nec, tincidunt nec elit. </p></div> </div> <div class="header"><p>Header</p></div> <div class="footer"><p>Footer</p></div> <div class="right-box"><p>RB</p></div> Media queries example <!doctype html> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { /* Firefox */ display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; /* Safari and Chrome */ display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; /* W3C */ display: box; box-orient: horizontal; box-pack: center; box-align: center; } div.container { width: 300px; height: 300px; background: gray; padding: 20px; } div.tile { width: 50px; height: 50px; background: #a3bad9; float: left; position: relative; margin: 25px; top: 45px; } /* max-width */ @media screen and (max-width: 700px) { div.container { width: 60px; height: 60px; } div.tile { width: 10px; height: 10px; margin: 5px; top: 7px; } } /* min-width & max-width */ @media screen and (min-width: 701px) and (max-width: 850px) { div.container { width: 120px; height: 120px; } div.tile { width: 20px; height: 20px; margin: 10px; top: 14px; } } /* min-width & max-width */ @media screen and (min-width: 851px) and (max-width: 1024px) { div.container { width: 240px; height: 240px; } div.tile { width: 40px; height: 40px; margin: 20px; top: 28px; } } </style> <body> <div class="container"> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> </div> Webkit 100% box <!doctype html> <html> <head> <title>Test</title> <style type="text/css" media="screen"> body,html{ margin: 0; padding: 0; height:100%; width:100%; } #box{ width: 100%; height: 100%; background: green; display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; } </style> </head> <body> <div id="box"> <p>The box</p> </div> </body> </html>