html - Is it possible to re-size a div on window re-size without using JavaScript? -
i need set size of div, in case #panel-container, when viewport reach size of 450px in height.
basically #panel-container should shrink user make smaller browser window leaving div visible within viewport.
i know if possible achieve effect without using js , using css. aware of css media queries need re-sizing happening while user re-size window.
i can use latest browsers , html5 , css3 features. ideas welcome.
http://jsbin.com/jefibidizo/1/
window.app = { start: function() {} }; body { background-color: darkslateblue; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: dimgray; } #panel-wrapper { position: fixed; top: 50px; left: 0; height: 100%; background-color: moccasin; } #panel-container { width: 200px; height: 400px; overflow: auto; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>builder</title> </head> <body onload="app.start();"> <div id="header">header</div> <div id="panel"> <h1>title</h1> <div id="panel-wrapper"> <div id="panel-container"> <div id="panel-content"> long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. long text here, long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here,some long text here. </div> </div> </div> </div> </body> </html>
you can achieve using calc set height of div 100% of viewport height, less height of header , setting max-height 400px (or whatever need be).
- more information on
calc - browser support
calc - more information on viewport percentage lengths
- browser support viewport percentage lengths
- more information on
max-height
here's quick example you:
*{box-sizing:border-box;} html{height:100%;} body{height:200%;margin:0;} div{ background:#ccc; height:calc(100vh - 50px); max-height:300px; font-family:arial; left:0; overflow:auto; padding:5px; position:fixed; top:50px; width:25%; }<div>lorem ipsum dolor sit amet, consectetur adipiscing elit. cras leo erat, blandit ac est nec, congue fermentum dui. duis vitae urna enim. cras vulputate ante @ ante dictum porta. cras placerat dolor augue, in eleifend lectus fermentum scelerisque. aenean dui magna, pharetra eu est sed, volutpat molestie libero. sed dictum pellentesque tellus, ac rhoncus turpis dictum eu. sed id aliquet ex. suspendisse scelerisque sem odio, sit amet pharetra elit viverra at. ut gravida congue rutrum. proin @ velit laoreet, venenatis mauris vitae, condimentum lectus. ut mollis purus eu dolor finibus tincidunt.</div>