How to make the div occupy the available height

Question

I am using the bootstrap framework, So while constructing a div if I give a height as 32em. It does perfectly fit in one phone, but when chosen the bigger size. The div does not occupy the remaining height in the bottom. How to make it occupy the remaining height in the bottom if the phone is changed?

Note that div is under the fluid-container and is the last div in that container. And code is something like this.

<style>
.box{
    height: 32em;
    background: grey;    
   }

</style>

<div class="container-fluid">
  <div class="row box"></div> 
</div>

do you need to set container-fluid height to .box..? or screen height to .box..? — WP Learner, Nov 17 '15 at 07:02
I did not override container-fluid. But that has several divs inside it. And this box is the last among those divs. Setting height: auto will only work when there is content right? — gates, Nov 17 '15 at 07:08
If you want to set screen height to the box, use this css height: 100vh;. Else if you need to use container-fliud height to box, use height: 100%; else I cannot understand what you expect by declaring height: 32em — WP Learner, Nov 17 '15 at 07:13
Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Alexander Elgin, Nov 17 '15 at 07:43

Alexander Elgin · Answer 1 · 2015-11-17T07:58:53.053

1

Please, check the snippet below

.container-fluid {
  height: 150px;
  background-color: red;
  width: 100%;
  overflow: hidden;
}

.box {
  height: 100%;
  background-color: blue;
  width: 50%;
  display: block;
}

.small-box {
  width: 75%;
  height: 50px;
  background-color: green;
}

<div class="container-fluid">
  <div class="small-box"></div>
  <div class="box"></div>
</div>

edited Nov 17 '15 at 07:58

answered Nov 17 '15 at 07:03

Alexander Elgin

6,796
4
40
50

Hi Alexander, would you like to explain a little about more about your answer – gates Nov 17 '15 at 07:11
@gates Sure. The wrapper DIV `.container-fluid` has a fixed height of 32em. By defining `height: 100%` the inner block occupies the whole available heights defined by the heights of the parent block. – Alexander Elgin Nov 17 '15 at 07:37
Same is applicable when the box is not only the div present inside the container-fluid. I mean like, there are other divs too present, but the last div is happen to be box. So in this case will the box occupy the remaining height? – gates Nov 17 '15 at 07:41
@gates Then you can find an answer here: http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 – Alexander Elgin Nov 17 '15 at 07:44

score 1 · Accepted Answer · answered Nov 17 '15 at 07:17

What about this demo

<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>


#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: red;
    display: block;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    height: 100%;
}

score 0 · Answer 3 · answered Nov 17 '15 at 08:12

One more solution is here

html, body {
    height: 100%;
    margin: 0px;    
}
.container-fluid {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
    width: 100%;
}
.box {
    display: table-cell;
    background: grey;
   }

<div class="container-fluid">
    <div class="row box">
    </div>
</div>

You can also find this solution in myblog

How to make the div occupy the available height

3 Answers3