Geek Answers Handbook

Make the remaining height <div>

This is Bootstrap 3. I just want to split my sidebar into two sections. The bottom should be high enough to fit the content, while the top should fill in the remaining height of the parent. The following is the closest I could achieve with my limited HTML / CSS capabilities:

My HTML:

 <body> <div class="container-fluid"> <div class="sidebar col-md-3" style="background-color: lightyellow"> <div class="topClass" style="background-color: lightcoral;"> Should fill the remaining height of the parent </div> <div class="bottomClass" style="background-color: lightcyan;"> Should be high enough to fit its contents A few lines of text <br /> A few lines of text <br /> A few lines of text <br /> A few lines of text <br /> </div> </div> </div> </body>

My CSS:

 .sidebar { position: fixed; top: 0; bottom: 0; left: 0; display: block; } .sidebar .topClass { position: absolute; overflow-x: hidden; overflow-y: auto; position: absolute; left: 0; right: 0; } .sidebar .bottomClass { position: absolute; bottom: 0; left: 0; right: 0; }

I see very similar problems listed on a Google machine, but in my case I don’t know the height of the other <div> , so I think I can’t use the new calc function.

+7
html css layout twitter-bootstrap twitter-bootstrap-3
source share
4 answers

I have a solution that works for Chromium and Chrome, but not for FF, and I have not tested it on additional browsers.

HTML

 <div class="sidebar"> <div class="table stretch-v"> <div class="row stretch-v"> <div class="cell"> <div class="top-class stretch"> Some Content </div> </div> </div> <div class="row"> <div class="cell"> <div class="bottom-class"> Some other Content </div> </div> </div> </div> </div>

CSS

 .sidebar{height: 100%; background:grey;} .table {display:table;} .row {display:table-row;} .cell {display:table-cell;} .stretch-v {height:100%;} .stretch {width:100%; height:100%;} .top-class{overflow:auto;}

And this is what it looks like: Demo

+2
source share

No need to use postion:fixed or position:absolute . Use table and table-row to get the desired result.

 body,html{height:100%; padding:0; margin:0;} .container-fluid, .sidebar{height:100%; background:grey; display:table; width:100%;} .topClass{display:table-row; height:100%;} .bottomClass{display:table-row;}

Demo

+3
source share

My friend showed me the best solution using flex layout , which works even for Firefox and Chrome / Chromium.

HTML:

 <div class="sidebar"> <div class="top"> Should fill the remaining height of the parent<br /> and bring up a scrollbar on overflow. </div> <div class="bottom"> Should be high enough to fit its content. </div> </div>

CSS

 body, html { height:100%; width:100%; padding:0; margin:0; } .sidebar { height:100%; display: flex; flex-direction:column; } .sidebar > .top { flex-grow:1; overflow:auto; } .sidebar > .bottom { flex:0 0 content; }

I also updated the script: JSFiddle

+2
source share

Try the following:

Just add 100% height to topClass tag

 <div class="topClass" style="background-color: lightcoral;height:100%">

FIXED HTML:

  <div class="container-fluid"> <div class="sidebar col-md-3" style="background-color: lightyellow;"> <div class="topClass" style="background-color: lightcoral;height:100%"> Should fill the remaining height of the parent </div> <div class="bottomClass" style="background-color: lightcyan;"> Should be high enough to fit its contents A few lines of text <br /> A few lines of text <br /> A few lines of text <br /> A few lines of text <br /> </div> </div> </div>
0
source share

More articles:


All Articles