体の高さ全体をピクセル単位で設定した数より少なく塗りつぶしたい div があります。しかし、私は仕事に行くことができませんheight: calc(100% - 50px)
。
これを行う理由は、さまざまな基準に基づいて動的な高さを持つ要素があるためです。たとえば、ヘッダーの高さは、含まれるさまざまな要素に基づいて変化します。次に、コンテンツ div を引き伸ばして、使用可能な残りのスペースを埋める必要があります。
ただし、div 要素はコンテンツの高さのままです。100% を body 要素の高さとして解釈しているようには見えません。
body {
background: blue;
height: 100%;
}
header {
background: red;
height: 20px;
width: 100%;
}
h1 {
font-size: 1.2em;
margin: 0;
padding: 0;
height: 30px;
font-weight: bold;
background: yellow;
}
#theCalcDiv {
background: green;
height: calc(100% - (20px + 30px));
display: block;
}
<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>
正しい方向への助けや指針をいただければ幸いです。