How to make a div fill remaining vertical space? [duplicate]

Question

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.

Btw for others looking for a solution, using flex is a good approach for the problem. css-tricks.com/snippets/css/a-guide-to-flexbox — Flying Gambit
– Flying Gambit, Commented Nov 17, 2016 at 14:12
...which is what the accepted answer of the duplicate I linked says to do. — James Donnelly
– James Donnelly, Commented Nov 17, 2016 at 14:13

SimplePixels · Accepted Answer · 2016-11-17 11:56:03Z

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>

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.
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.

SimplePixels · Accepted Answer · 2016-11-17 11:13:51Z

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>

That would require me to keep a check of all the fixed ones which I want to avoid.

Collectives™ on Stack Overflow

How to make a div fill remaining vertical space? [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related