HTML CSS examples for CSS Widget:Footer
Div header footer structure with head fixed
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html, body { height:100%; margin:0; } #main {<!--from w w w . ja v a 2 s. co m--> min-height:100%; margin-bottom:-51px; } #header { height:51px; background-color:Chartreuse; } #footer { height:51px; background-color:yellow; } table { margin-top:11px; width:201px; border-collapse:collapse; } td { border:2px solid blue; } tbody { display:block; height:201px; overflow-y:scroll; overflow-x:hidden; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } thead { width:calc(100% - 2em); background-color:pink; } </style> </head> <body> <div id="main"> <div id="header"> Lorem ip </div> <div id="content"> <table id="table"> <thead> <tr> <td width="50%">Lore</td> <td width="50%">Lorem</td> </tr> </thead> <tbody> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> <tr> <td>Lor</td> <td>Lorem ipsum </td> </tr> </tbody> </table> </div> </div> <div id="footer"> Lorem ip </div> </body> </html>