CODEWITHSUNDEEP
csshtml
Michael C. Gates
Michael C. Gates

Reputation: 992

Child div expand to remainder of parent

I have a div containing two divs stacked.

.container {
    position: fixed;
    padding:4px;
    top: 1px;
    left: 1px;
    width:200px;
    height: 200px;
    border: 4px solid #999;
}
.box1 {
    position: relative;
    height: 50px;
    border: 4px solid #f00;
}
.box2 {
    border: 4px solid #00f;
    height: 100%;
    position: relative;
    overflow: auto;
}

<div class='container'>
    <div class='box1'></div>
    <div class='box2'>
        <div style='height:400px;width:10px;background-color:#000;'></div>
    </div>
</div>

I Don't want DIV2 to expand past the parent div regardless of how much space DIV1 takes (as it expands with certain selections), and I want DIV2 to scroll. I thought 100% height would do it, but it expands it to the same VALUE of the parent div which is expected behavior. Tables seem to be able to do this, but I don't want to use tables.

Here is an example (In the example, the blue div should stop at the bottom of the grey div) :

http://jsfiddle.net/gateshosting/uJ7Ns/

Upvotes: 2

Views: 218

Answers (2)

tedski
tedski

Reputation: 2311

Unfortunately you can't do this with pure CSS.

You could use Javascript/jQuery though:

$(function(){
    //this is triggered by resizing the window
    $(window).on("resize", function(){
        $(".box2").height($(".container").height() - $(".box1").height());
    }).trigger("resize"); //this initializes the height
});

You'd have to modify your css:

body, html{
    padding:0;
    margin:0;
    height:100%
}

.container{
    height:100%;
    width:200px;
    background: silver;
}

.box1{
    background: pink;
    height:100px;
    position:relative;
}

.box2{
    background: lightBlue;
    overflow:auto;
}

You don't want padding on the container elements (.container, .box1, .box2) because that will throw off the height by the amount you're padding. If you want to have padding in the container elements, you should add a div inside your content with padding so your height and width is not thrown off:

CSS:

.pad {
    padding: 5px;
}

HTML

<div class='box2'>
    <div class="pad">
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
    </div>
</div>

Try resizing the window here: http://jsfiddle.net/THWMp/3/

Upvotes: 1

Anoop
Anoop

Reputation: 23208

Working jsfiddle

Set height of box equal to height available minus height taken by borders minus height taken by margins

 box2 {
    border: 4px solid #00f;
    height: 134px;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}

Upvotes: 2

Related Questions