1

There are 2 div's horizontally each of width 100%. 1st div height is static i.e. 120px now I want that my second div automatically cover's entire height of my screen. Currently I'm using javascript / jQuery for it but I want to do it with pure CSS. By entire height I mean remaining area of screen after what 1st div covers.

Mohammad Hani
  • 208
  • 4
  • 14

2 Answers2

3

Simply use flex and you don't have to worry about the fixed size element. By specifying 100vh to body you fill the whole screen and by adding flex:1 to the last div it will cover all the remaining area left by the first one.

body{
  margin:0;
  padding:0;
  height:100vh; /* or simply use height:100% with body and html */
  display:flex;
  flex-direction:column;
}
.area1{
  height:120px;
  background:pink;
}
.area2{
  flex:1;
  background:lightblue;
}
<div class="area1">abc</div>
<div class="area2">123</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks ! it worked (y). Just a question. What's a difference between 100% and 100vh ? – Mohammad Hani Jan 14 '18 at 10:08
  • 100% means % of the parent height and 100vh means 100% of the screen height .. both can be equal in this situation if for example you put 100% height on HTML and then 100% height on body ... you will have the same result, but i used 100vh so no need to specify both 100% ;) – Temani Afif Jan 14 '18 at 10:13
  • Great ! Thanks sir you're superstar (y). I appreciate your help ! – Mohammad Hani Jan 14 '18 at 10:18
2

Using css calc example. The screen height is 100vh (i.e. when the body's padding and margin are both 0) If you know the height of the first div, then the second div's height can be calculated as calc(100vh - {height of other div}px)

body{
  margin:0;
  padding:0;
}
.area1{
  height:120px;
  background:pink;
}
.area2{
  height:calc(100vh - 120px);
  background:lightblue;
}
<div class="area1">abc</div>
<div class="area2">123</div>
D.B.
  • 1,792
  • 1
  • 10
  • 13
  • this will work well, but it won't be generic ... if for example you will have padding/border, etc. You have to calculate the final height of the div – Temani Afif Jan 13 '18 at 20:52