CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayouttwitter-bootstrap-3
dotNET
dotNET

Reputation: 35380

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.

Upvotes: 7

Views: 13197

Answers (4)

Robsdedude
Robsdedude

Reputation: 1403

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

Upvotes: 2

Robsdedude
Robsdedude

Reputation: 1403

I've got a solution that works for Chromium and Chrome but not for FF and I didn't test it on further 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

Upvotes: 2

Suganth G
Suganth G

Reputation: 5156

Try this:

Just add height 100% in topClass tag

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

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

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

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

Upvotes: 3

Related Questions