Want more features on Pastebin? Sign Up, it's FREE!
Guest

one column layout

By: lalatino on Aug 14th, 2012  |  syntax: HTML  |  size: 0.83 KB  |  views: 36  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2. <head>
  3. <title>http://stackoverflow.com/questions/11960636/how-to-make-a-div-stretch-its-height-between-two-other-divs-and-center-its-conte</title>
  4.  
  5. <style type="text/css">
  6.  
  7. html,body {
  8.   margin:0;
  9.   padding:0;
  10. }
  11.  
  12. #top {
  13.   position: fixed;
  14.   top:0;
  15.   width:100%;
  16.   height:100px;
  17.   background-color:green;
  18.   z-index:1;
  19. }
  20.  
  21. #middle {
  22.   position: relative;
  23.   width:99%;
  24.   margin-top: 110px; /*top menu*/
  25.   margin-bottom: 110px; /*bottom div*/
  26.   border:5px solid blue;
  27.   border:5px solid blue;
  28.   text-align:center;
  29.   z-index:0;
  30. }
  31.  
  32. #bottom {
  33.   position:fixed;
  34.   bottom:0;
  35.   width:100%;
  36.   height:100px;
  37.   background-color:yellow;
  38.   z-index:1;
  39. }
  40.  
  41. </style>
  42.  
  43. </head>
  44. <body>
  45.  
  46. <div id="top">HEADER
  47. </div>
  48.  
  49. <div id="middle">This is the body<br/>
  50. </div>
  51.  
  52. <div id="bottom">FOOTER
  53. </div>
  54.  
  55. </body>
  56. </html>
clone this paste RAW Paste Data