41

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.

Didix
  • 567
  • 1
  • 7
  • 26
enfix
  • 6,680
  • 12
  • 55
  • 80
  • Post your code if you want an answer. – M H Jun 19 '15 at 23:28
  • 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

1 Answers1

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);
}
Duncan Jones
  • 67,400
  • 29
  • 193
  • 254
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