CODEWITHSUNDEEP
htmlcss
iMax
iMax

Reputation: 587

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

First I want to show the layout to you, so I think it will be clear what I try to achieve:

enter image description here

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

Upvotes: 3

Views: 1917

Answers (3)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Compatible on all the 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>

Upvotes: 2

Giwan
Giwan

Reputation: 1590

You could do this. 

#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;
}

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

You could use the calc() function to do this.

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>

Upvotes: 5

Related Questions