Make
fill remaining height

Question

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.

Suresh Ponnukalai · Accepted Answer

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

Rouven B. · Answer

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

Make <div> fill remaining height

Tags:

html

css

layout

twitter-bootstrap

twitter-bootstrap-3

dotNET

2 Answers

Suresh Ponnukalai

Rouven B.

Recent Activity

Donate For Us