javascript - Make a div to fill the rest of the available screen height -
i have structure:
i make content2's min-height = height of screen - height of other divs.
with html/css below, outcome greater screen height. how can wanted? copyright part (footer) inside content2, want make content2's height exact in screen.
body { margin:0; border:0; background-color:#24373b; color: #fff; } #headerbg { min-width:980px; background-color:#000; } #header { width:980px; } #content1 { width:980px; } #content2 { width:960px; padding:10px; margin-top:30px; background-color:#355258; min-height:100hv; }
<body> <div id="headerbg"> <div id="header">header</div> </div> <div id="content1">content1</div> <div id="content2">content2</div> </body>
you using 100hv instead of 100vh min height. fixed:
#content2{ width:960px; padding:10px; margin-top:30px; background-color:#355258; min-height: calc(100vh - 50px); }
but before use vw or vh, should define:
html { width: 100%; height: 100%; } body { width: 100%; height: 100%; }
Comments
Post a Comment