CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
gates
gates

Reputation: 4583

How to make the div occupy the available height

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>

Upvotes: 0

Views: 186

Answers (3)

Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 930

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

Upvotes: 0

Alexander Elgin
Alexander Elgin

Reputation: 6956

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>

Upvotes: 1

Dev
Dev

Reputation: 6776

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

Upvotes: 1

Related Questions