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" > </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
Post a Comment