CODEWITHSUNDEEP
htmlcss
Jeremy
Jeremy

Reputation: 46340

Specifying height of divs as 100% of container minus height of sibling div

I've got a divs in the following layout

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:100%">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

My problem is that divContent how has a height of 100% of the body. What I need it to do is take up the entire height of divBody minus the height of divHeader. So I set the height of divContent to auto:

<html style="height:100%">
<body style="height:100%">
    <div id="divBody" style="height:100%;width:1000px">
        <div id="divHeader" style="height:30px"></div>
        <div id="divContent" style="height:auto">
            <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div>
            <div id="divRight" style="width:800px"></div>
        </div>
    <div>
</body>
</html>

Now divContent's height is correct, it is 100% of divBody minus the height of divHeader, but now the height of divLeft does not fill 100% of it's parent (divContent). How can I get the best of both worlds here?

Upvotes: 4

Views: 5025

Answers (4)

Calsal
Calsal

Reputation: 1485

Since you know the height of #divHeader is 30px, the simple answer to your question would be to use calc() on #divContent like this:

#divContent {
  height: calc(100% - 30px);
}

The tough part is to set height of a sibling like #divContent when the height of the other sibling(s) are unknown or dynamic. That's when CSS Flex comes in handy:

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%;
}

Element with class bottom will use 100% height minus the height of its siblings. The flex-shrink: 0 rule is important, primarily for iOS devices, to avoid shrinking on the sibling.

Working example on Codepen here.

Upvotes: 6

Rachid
Rachid

Reputation: 832

this is an old question but here is my two cents using calc(100% - 30px) to subtract the header size:

#divContent {
    height: calc(100% - 30px);
    background-color: Aqua;
    position: relative;
}

Upvotes: 0

MK_Dev
MK_Dev

Reputation: 3333

If all you care about is the height of the two columns and the fixed header height, there's a CSS hack that can help you achieve that.

Consider this HTML:

<html style="height:100%">
<body style="height:100%">
    <div id="divBody">
        <div id="divHeader">Header</div>
        <div id="divContent">
            <div id="divLeft">Left</div>
            <div id="divRight">Right</div>
        </div>
    </div>
</body>
</html>​

And the following CSS:

#divBody {
    height: 100%;
    width: 1000px;
    overflow: hidden;
}

#divHeader {
    height:30px;
    background-color: Yellow;
}

#divContent {
    height:auto;
    background-color: Aqua;
    position: relative;
}

#divLeft {        
    height:100%;
    float:left;
    width:200px;
    border-left:1px solid black;
    background-color: Azure;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

#divRight {
    height: 100%;
    width:800px;
    background-color: Pink;

    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

Here's JSFiddle with the illustration: http://jsfiddle.net/3rDNC/

​

Upvotes: 0

Sebas
Sebas

Reputation: 21522

You should go on with the percentages instead of using fix amount of pixels for the header. The widht of header and content should be 100%, but the height "auto", so it actually adjusts to their real need within the body div you're using.

Regarding to div left and right, both should set to height 100% I guess

Upvotes: 1

Related Questions