Absolute and relative positioning at the same time in CSS

Question

Basically I have 3 divs:

<div></div>
<div></div>
<div></div>

clicking on 1st div toggles visibility of 2nd div

what I want is that 3rd div would take up all the remaining space but no more. In case of large 3rd div content I want scrollbar only on 3rd div, not whole page.

I have JS solution. So any pure CSS would be highly appreciated.

There is 4 more ways how to stack 3 divs, so this is detailed enough as there is no more details! — user2846569, Mar 06 '15 at 15:12
This is a duplicate of "Make a div fill the height of the remaining screen space" http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space — BSMP, Mar 06 '15 at 15:15

score 1 · Accepted Answer · answered Mar 06 '15 at 15:38

Here is one approach that involves using a combination of CSS table-cells and absolute positioning.

Create a CSS table as the top level container .main, and define three display: table-row containers .head, .extra and .content.

Within .content, nest a display: table-cell element .wrap and set position: relative. Within .wrap, use absolute positioning to fit a .scroller container that will hold the content.

If you hide the .extra block, the .content will stretch vertically to take up the remaining space.

html, body {
    height: 100%;
    margin: 0;
}
.main { 
    border: 1px dotted gray;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: table;
    overflow: hidden;
}
.head {
    display: table-row;
    height: 50px;
    background-color: beige;
    
}
.extra {
    display: table-row;
    /* display: none; */
    height: 100px;
    background-color: tan;
}
.content {
    display: table-row;
    background-color: lightblue;
    height: auto;
}
.content .wrap {
    display: table-cell;
    height: auto;
    position: relative;
}
.scroller {
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}

<div class="main">
    <div class="head">head</div>
    <div class="extra">extra</div>
    <div class="content"><div class="wrap"><div class="scroller">
        <p>Scrolling div...</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum imperdiet metus ac elementum. Donec viverra porttitor velit, ut eleifend nulla porttitor quis. Donec placerat, leo ac volutpat pellentesque, elit mauris aliquet metus, sit amet dictum enim augue consequat elit. Pellentesque eu diam a sem ornare tristique. Sed sollicitudin elementum nibh, eget tincidunt sem rhoncus at. Morbi cursus ornare dolor, vel tempus leo blandit ut. Donec at dictum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus tellus in aliquet accumsan. Nam scelerisque ante eros, et tempus dolor mollis nec. Cras in mauris ac orci hendrerit venenatis. Nunc porta nisi eu odio feugiat, sed fermentum odio posuere. Vivamus luctus dui sit amet lobortis dignissim. Nulla feugiat est lacinia est porta porttitor. </p>
        </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Mar 06 '15 at 15:09

0

If you know that there will only be three divs, you could just control the height and change it from 33% to 66% when the second div collapses, and using css transition to make the animation.

answered Mar 06 '15 at 15:09

Tony Gustafsson

828
1
7
18

and how to do this with CSS? – user2846569 Mar 06 '15 at 15:15
Something like this? http://jsbin.com/mihomeropi/2/ You still need JS to trigger the CSS transition though... – Tony Gustafsson Mar 06 '15 at 15:31
when height reduced, scroll is on whole page – user2846569 Mar 06 '15 at 15:36

Absolute and relative positioning at the same time in CSS

2 Answers2