Bootstrap - fill remaining vertical space

Question

I'm trying to design this layout using bootstrap. I put logo and navbar but now I have to insert the remaining div.
I need to extend this div (with the question mark) to the remaining space of the page (with margin like the picture).
I don't know logo or navbar percentage height.

enter image description here

Edit: Post my code (source page of Yii Framework)

 <a href="index.html"><img width="150" src="images/logo.png"/></a>
 <nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="navbar-header">
        <button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button></div>
        <div class="collapse navbar-collapse" id="yii_booster_collapse_yw0">
            <ul id="yw2" class="nav navbar-nav">
                <li class="active">
                    <a href="index.php/site/home">Home</a>
                </li>
            </ul>
            <ul class="pull-right nav navbar-nav" id="yw3">
                <li>
                    <a href="index.php/user/profile/edit">Profile</a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
                    </a>
                    <ul id="yw4" class="dropdown-menu">
                        <li>
                            <a tabindex="-1" href="index.php/site/contact">Contact Us</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
   </div>
 </nav>
 <div id="content">
     fill vertical space
 </div>

I need to fill remaining space, not logo/brand problem.

You could wrap in divs and set height 100% (there's more to this, this is quick answer), or you could try flexbox, it has something to do this built in that's pretty neat. — ajmajmajma, Jun 19 '15 at 23:29
If i use height:100% i have scroll bar, I don't want this (if content doesn't need) — enfix, Jun 19 '15 at 23:58

score 26 · Accepted Answer · edited Sep 21 '16 at 14:10

26

You will see in the css that I used calc() in the heightvalue to do a subtraction.

First get the viewport height of the device screen size by using 100vh then subtract the height that is used above the div that you want to fill to take up the rest of the screen.

Here is the Fiddle.

Does this help?

PS: I commented in your nav code where you have a extra divand where I added a </li>.

.block {
  height: -webkit-calc(100vh - 72px);
  height: -moz-calc(100vh - 72px);
  height: calc(100vh - 72px);
  background-color: rgba(90,90,190,0.8);
}

edited Sep 21 '16 at 14:10

Duncan Jones

67,400
29
193
254

answered Jun 20 '15 at 02:20

AngularJR

2,752
2
16
19

2

What if you don't know the height of the top element (i.e. it's dynamically calculated based on its contents)? – kgreenek Sep 27 '17 at 21:18
Hi there, You might need to try using some JS code to dynamically calculate that and feed that into the calculation. – AngularJR Sep 27 '17 at 22:31

Bootstrap - fill remaining vertical space

1 Answers1