2

I have two main sections in the page 1) Topbar 2) Container. The topbar has a fixed height of 50px and the container should have the remaining height.

I tried giving the container height as 100% but its not working correctly as it is making the webpage take 100% + 50px. Hence I am getting a vertical scrollbar which I am trying to avoid.

Here is a fiddle to demonstrate my issue. Please use the full screen view http://www.bootply.com/ov2s9oOVku

How can I solve this issue ?

Update 1

I tried the solution posted in posted here https://stackoverflow.com/a/24979148/5936814 but for some reason its not working for me. Please see this fiddle http://www.bootply.com/9iyQJ7Trw2.

Community
  • 1
  • 1
Flying Gambit
  • 1,238
  • 1
  • 15
  • 32

2 Answers2

5

A different approach would be to use display: flex

html, body{
 height:100%;
    margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.topbar {
  flex: 0 1 auto;
  height: 50px;
}
.container-fluid {
  flex: 1 1 auto;
}
<div class="wrapper">
  <div class="topbar" style="border: 2px solid red;"></div>

  <div class="container-fluid" style="border: 2px solid black;">
    <div class="row-fluid" style="border: 2px solid green;">
      <div class="col-lg-12"></div>
    </div>
  </div>
 </div>
SimplePixels
  • 147
  • 5
  • To make my previous comment clear, its taking full available vertical space but it also messes up the width, which is not full width any more. – Flying Gambit Nov 17 '16 at 12:28
  • 2
    To have it fully working as expected, one might have to override the `margin` for `.container-fluid` as well. Otherwise, it will not span the full width, as it would do by default. – Oliver Salzburg Nov 17 '16 at 12:39
3

You can use height: calc(100vh - 50px);

Where 50px is the height of your topbar and 100 vh is 100% of the viewheight.

The viewheight(vh) and viewwidth (vw) properties are quite amazing

<div style="border: 2px solid red; height:50px"></div>

<div class="container-fluid" style="border: 2px solid black; height:calc(100vh - 50px);">

  <div class="row-fluid" style="border: 2px solid green; height:100%">
    <div class="col-lg-12"></div>
  </div>
</div>
SimplePixels
  • 147
  • 5