javascript - Make a div to fill the rest of the available screen height -


i have structure:

enter image description here

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

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -