daily pastebin goal
8%
SHARE
TWEET

Pixels vs. Bytes: Sticky footer

a guest Dec 16th, 2013 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2.  
  3. <html>
  4.  
  5. <head>
  6.         <meta charset="UTF-8">
  7.         <!-- <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> -->
  8.         <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  9.         <style type="text/css">
  10.                 /*** The essential CSS needed for the layout ***/
  11.  
  12.                 html, body {
  13.                         height: 100%;
  14.                         margin: 0pt;
  15.                 }
  16.  
  17.                 .Frame {
  18.                         display: table;
  19.                         width: 100%;
  20.                 }
  21.                 html>/**/body .Frame {
  22.                         height: 100%;
  23.                 }
  24.  
  25.                 .Row {
  26.                         display: table-row;
  27.                         height: 1px;
  28.                         overflow: hidden;
  29.                 }
  30.                 html>body .Row.Expand {
  31.                         height: auto;
  32.                 }
  33.  
  34.                 /*** Some other CSS for the look ***/
  35.  
  36.                 body {
  37.                         background: #999;
  38.                 }
  39.  
  40.                 #Header {
  41.                         background: #333;
  42.                         color: #eee;
  43.                         height: 70pt;
  44.                 }
  45.  
  46.                 #Content {
  47.                         background: #ffc;
  48.                 }
  49.  
  50.                 #Footer {
  51.                         background: #cfc;
  52.                 }
  53.  
  54.                 p, h1, h2, h3 {
  55.                         margin: 10pt;
  56.                 }
  57.         </style>
  58.         <title>Pixels vs. Bytes | Example: Sticky footers for everyone</title>
  59. </head>
  60.  
  61. <body class="Frame">
  62.         <div id="Header" class="Row">
  63.                 <h1>Header (70pt)</h1>
  64.         </div>
  65.         <div id="Content" class="Row Expand">
  66.                 <h2>Content (expands)</h2>
  67.         </div>
  68.         <div id="Footer" class="Row">
  69.                 <h3>Footer (auto)</h3>
  70.         </div>
  71. </body>
  72.  
  73. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top