I have a div that I want to fill the whole height of the body less a set number in pixels. But I can't get height: calc(100% - 50px) to work.
(The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.)
The div element however stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.
HTML:
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
up vote
12
down vote
favorite
3
I have a div that I want to fill the whole height of the body less a set number in pixels. But I can't get height: calc(100% - 50px) to work.
(The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.)
The div element however stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.
HTML:
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
CSS:
body {background: blue; height:100%;position:relative;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; backgr