CODEWITHSUNDEEP
csshtmlheight
neuDev33
neuDev33

Reputation: 1623

Set the height of a child div to parents height - siblings height

I have 2 child divs within a parent div. Child1 is the header and Child2 is the body. I want the height of Child 2 to be set to height of Parent - Child1. Child2 has content so it should be scrollable

I know I can set the height for Child2 via JS, but is it poss to do this via CSS?

Upvotes: 0

Views: 1311

Answers (1)

James Donnelly
James Donnelly

Reputation: 128781

If the height is fixed you can simply give the header negative margin-bottom equal to the height of the header, then give the content divider padding-top also equal to that height:

HTML:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>

CSS:

html, body { height:100%; margin:0; }
#wrapper {
    height:100%;
    background:#000;
}
#header {
    height:100px; /* Fixed height header */
    margin-bottom:-100px; /* Negative height of header */
    z-index:2;
    position:relative;
}
#content {
    min-height:100%;
    padding-top:100px; /* Height of header */
    box-sizing:border-box;
    z-index:1;
    position:relative;
}

JSFiddle example.

Upvotes: 2

Related Questions