CSS2の高さ：calc（100％ - 18px）

CSS2でheight: calc(100% - 18px);をどうすればいいですか？私は3 divを持っています。CSS2の高さ：calc（100％ - 18px）

<body> 
    <div id="top">top</div> 
    <div id="middle">middle</div> 
    <div id="bottom">bottom</div> 
</body>

私はmiddleは200pxなると私はbottomがbottom

後に右になりたい右top

を下回るようにしたいtopが100％の高さマイナス200px

になりたいですその考え方は、topとmiddleが1スクロールバーが一番上にあるときにブラウザウィンドウの00％を表示しますが、ユーザーはスクロールしてbottomを表示できるはずです。ユーザーがスクロールすると、topとbottomは同じサイズになります（ユーザーがウィンドウのサイズを変更しない限り）。

JavaScriptを使用せずにこれを行いたいのですが、まだCSS3準拠のブラウザがないため、CSS2にする必要があります。

出典

2017-10-09 IMTheNachoMan

よろしいですか？ ['calc（）'はIE9ほどまでにサポートされていました。]（https://caniuse.com/#search=calc） – Blazemonger

IE9で部分的にサポートされ、IE10から完全にサポートされています –

box-sizing: border-boxの横に余白と余白を混在させて、これを行うことができます。

注：は、以下の例では、私はスニペットを出力するには大きすぎる50px代わりの200pxた200pxとしてビットを使用しました。 -50pxと50pxのインスタンスを-200pxと200pxに変更して、目的の出力にする必要があります。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#top { 
 
    background: tomato; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    margin-bottom: -50px; 
 
    padding-bottom: 50px; 
 
} 
 

 
#middle { 
 
    background: cornflowerblue; 
 
    height: 50px; 
 
} 
 

 
#bottom { 
 
    background: papayawhip; 
 
}

<div id="top">top</div> 
 
<div id="middle">middle</div> 
 
<div id="bottom">bottom</div>

出典

2017-10-09 14:06:29

これは素晴らしいことです。ありがとうございました！ – IMTheNachoMan

CSS2の高さ：calc（100％ - 18px）

答えて

関連する問題