Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make <div> fill remaining height

It's Bootstrap 3. I just want to split my sidebar into two sections. The bottom part should be high enough to fit the contents, while the top section should fill the remaining height of the parent. Following is the closest that I could achieve with my limited HTML/CSS abilities:

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 a very similar problems listed on 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.

like image 205
dotNET Avatar asked Aug 26 '14 06:08

dotNET


2 Answers

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

like image 54
Suresh Ponnukalai Avatar answered Oct 18 '22 21:10

Suresh Ponnukalai


A friend of mine showed me a better solution using flex layout that works at least 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 fiddle: JSFiddle

like image 2
Rouven B. Avatar answered Oct 18 '22 21:10

Rouven B.