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.
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.
Best Answer
You will see in the css that I used calc() in the
height
value 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
div
and where I added a</li>
.