Clever Geek Handbook

Make div fill the remaining height of the browser window without javascript

I want to show you the layout first, so I think it will be clear what I am trying to achieve:

enter image description here

The first div is at the top of the page and has a static height. The second div should fill the remaining space to the bottom. How can I achieve this without javascript or jQuery?

+3


source to share


3 answers


Compatible in all browsers



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.head {
  height: 100px;
  top: 0;
  width: 100%;
  background: #00963F;
  position: absolute;
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: white;
  color: white;
  text-align: center;
}
.cont {
  position: absolute;
  top: 100px;
  width: 100%;
  bottom: 0px;
  background: #27338B;
  border-width: 5px;
  border-style: solid;
  border-color: white;
  color: white;
  text-align: center;
}
      

        
        
        
      

    
<div class="head">Fixed height</div>
<div class="cont">Rest of the browser height</div>
Run codeHide result


+2


source


You can use the function for this calc()

.



html, body {
  height: 100%;
  margin: 0;
}
#top {
  background: #00A743;
  height: 100px;
}
#bottom {
  background: #40008B;
  height: calc(100% - 100px);
}
      

        
        
        
      

    
<div id="top"></div>
<div id="bottom"></div>
Run codeHide result


+3


source


Can you do it.

#div1 
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 0px;
    background-color: #900;
}

#div2
{
    position:absolute;
    display: block;
    height: 200px;
    width: 100%;
    top: 200px;
    background-color: #090;
}
0


source






More articles:


All Articles