CODEWITHSUNDEEP
htmlcss
mohitsahu
mohitsahu

Reputation: 101

how to make a div to take up the remaining height using css?

I Have the following html:

<html>
<body>
<div id="header" style="height:55px;">
<div id="menu" style="height:85px;">
<div id="container" style="height:100%;">
<body>
</html>

but container div is not taking the full height.its takes the height to cover the content within it.

Upvotes: 2

Views: 1467

Answers (2)

Zaqx
Zaqx

Reputation: 1442

HTML tags must be closed.

For example, <div> must be followed by </div> there a few exceptions to this such as the <input /> and <img /> tags which are considered self closing.

Here is a slightly better version of your code: http://jsbin.com/uyIwERE/4/edit

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

You can use calc() to achieve that

#container {
    height: calc(100% - 140px);
    background: #f00;
}

Demo

Here, I am adding up 55px of #header and 85px of #menu which sums up to 140px and than we deduct that from 100%. Also, avoid using inline CSS. Just make sure you set the parents height to 100% as well else the solution will fail.

html, body {
    height: 100%;
}

The browser support is pretty decent as well.

enter image description here

Credits for support chart : Mozilla Developer Network

Upvotes: 5

Related Questions