daily pastebin goal
45%
SHARE
TWEET

Sticky footer and center content CSS Chrome/Firefox

a guest Jan 18th, 2017 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  4.     <style>
  5.       html, body, #react-root {
  6.         height: 100%;
  7.         margin: 0;
  8.       }
  9.  
  10.       body {
  11.         height: 100%;
  12.         width: 100%;
  13.       }
  14.  
  15.       .site-container {
  16.         display: table;
  17.         height: 100%;
  18.         width: 100%;
  19.       }
  20.  
  21.       .site-row {
  22.         display: table-row;
  23.         height: 1px;
  24.         overflow: hidden;
  25.       }
  26.  
  27.       .site-row.expand {
  28.         height: auto;
  29.       }
  30.  
  31.       .site-row.expand .inner-expand {
  32.         height: 100%;
  33.         display: table-cell;
  34.       }
  35.  
  36.       html>/**/body .site-container {
  37.         height: 100%;
  38.       }
  39.  
  40.       html>body .site-row.expand {
  41.         height: auto;
  42.       }
  43.  
  44.       .height-inherit {
  45.         height: inherit;
  46.       }
  47.  
  48.       .center-content {
  49.         display: -webkit-box;
  50.         display: -webkit-flex;
  51.         display: -ms-flexbox;
  52.         display: flex;
  53.         flex-direction: column;
  54.         justify-content: center;
  55.         vertical-align: middle;
  56.         align-content: center;
  57.         align-items: center;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <div id="react-root">
  63.       <div class="site-container">
  64.         <header class="site-row">
  65.           Header
  66.         </header>
  67.  
  68.         <div class="site-row expand">
  69.           <div class="inner-expand">
  70.             <div class="container height-inherit">
  71.               <div class="height-inherit center-content">
  72.                 <div>
  73.                   Content
  74.                 </div>
  75.               </div>
  76.             </div>
  77.           </div>
  78.         </div>
  79.  
  80.         <footer class="site-row">
  81.           Footer
  82.         </footer>
  83.       </div>
  84.     </div>
  85.   </body>
  86. </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