Scrollable div below non-fixed height div

Question

I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).

My attempt on Plunker.

Is it possible with pure CSS, without JavaScript calculation?

Edit:

The list should strech to the bottom of the screen/container div.

SW4 · Accepted Answer · 2014-05-14T09:25:15.080

You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.

Then all you need to do is set the tables height and max-height as appropriate.

By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements

Demo Fiddle

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
    max-height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    background:lightgreen;
    height:1%;
}
.row:last-of-type >.cell {
    background:pink;
}
#list {
    height:100%;
    overflow-y:auto;
}

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div id="list">
                <div class="list-element">These are list elements.</div>
                <div class="list-element">If the list is too long</div>
                <div class="list-element">and reaches the bottom</div>
                <div class="list-element">the list should be scrollable.</div>
                <div class="list-element">(And only the list</div>
                <div class="list-element">not together with the <strong>list-head</strong>.)</div>
            </div>
        </div>
    </div>
</div>

Sorry, I think, I wasn't clear enough in the question: the list should stretch to the bottom of the screen/container div, but the height of your table is fixed. (Solution with table is okay.) I'll edit my question. — Csati, May 14 '14 at 09:22
@Csati - as noted above, simply change the height of the table, the height given above is an example only — SW4, May 14 '14 at 09:23

score -1 · Answer 2 · answered May 14 '14 at 09:09

-1

Will this work for you ?

<div id="top" >

</div>
<div id="bottom">

</div>

<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>

answered May 14 '14 at 09:09

Mevin Babu

2,405
21
34

score -1 · Answer 3 · answered May 14 '14 at 09:20

use this structure

<div class="main">
   <div class="header">

   </div>

   <div class="content">

   </div>
</div>


.main{
    height:100%;
}

.header{
    height:50px;
    position:fixed;
    top:0;
    background:#454546;
    width:100%;
}

.content{
    margin-top:53px;
    background:#ffffff;
}

Demo

Scrollable div below non-fixed height div

Edit:

3 Answers3

Demo Fiddle