html - How to resize content area with CSS dynamically and no javascript -


i want this:

  • the blue area resizes when browser window resizes.
  • the header visible.
  • the blue area starts header finishes (not behind header or above).
  • the blue area ends before footer.
  • between blue area , footer exist 5 yellow pixels.

is possible css , html ( without javascript ) ?

<!doctype html> <html lang="en-us"> <head>     <meta charset="utf-8"/>     <title>test</title>      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>     <style>      *{         margin:0px;         padding:0px;     }      header, nav, article, footer, address {           display: block;       }      header{         position:relative; height: 50px; background-color:#2b2b2b;     }      footer{         height: 50px;          width:100%;          bottom: 0px;          position: fixed;          background: red;     }      #explorer{         position:relative; bottom:55px;      }      #sections{         width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;     }      </style> </head>  <body style="background-color:yellow">     <header >         <h1>test</h1>     </header>   <div id="explorer" >       <div id="sections" >    &nbsp;       </div>   </div>   <footer>        /* footer content */   </footer> </body>  </html> 

i think kit's code needs 1 adjustment & have remove height:100% sections div & work fine. while testing following code, noticed if reduce height beyond limit footer comes above header. although, practically height never less, still might want add z-index:5000 header tag


Comments

Popular posts from this blog

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

apache - Add omitted ? to URLs -

php - How can I stop spam on my custom forum/blog? -