ここで提供されているようなソリューションを実装しようとしています: https://stackoverflow.com/a/12242226
(私にとって)問題は、内側のdivの高さを制限できないことです。したがって、次のようにソリューションを更新しました。
<style type='text/css'>
html, body {
height: 400px;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 400px;
width: 100%;
background: yellow;
}
.component {
display: table-row;
background: gray;
}
.content {
display: table-cell; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.contentRel {
height: 100%;
background: blue;
position: relative;
}
.contentRemaining {
background: red;
position: absolute;
top:30px;
bottom:0;
left: 0;
right: 0;
overflow: auto;
}
</style>
<body>
<div class="wrapper">
<div class="component">
<h1>Component</h1>
<p>of variable height</p>
</div>
<div class="content">
<div class='contentRel'>
<div>100% Component Header</div>
<div class='contentRemaining'>
<div style='height:1000px'>
100% Component Content
</div>
</div>
</div>
</div>
<div class="component">
<h3>Other</h3>
<p>componet of variable height</p>
</div>
</div>
</body>
FFで必要に応じて機能します(contentRel divの高さは320pxに設定されています-ラッパーdivの高さからコンポーネントdivの高さの合計を引いたものです)が、IEでは機能しません:(contentRel divの高さが400pxに設定されています-と同じラッパー div の高さ)。誰もそれを修正する方法を知っていますか?
これが私の問題の説明です(おそらくそれは別の解決策です):
- 高さをいくつかの px 値に設定した外部 div があります (例ではラッパー div)。
- その div には、いくつかの JS コードによって動的に非表示にできる他の div がいくつかあります。
- 1 を除くすべての div にはある程度の高さがあります。私には不明ですが(例ではコンポーネントのdiv)。
残りの 1 つの div (例ではコンテンツ div) を次のようにします。
を。ラッパー div の残りの高さをすべて使用する
b. あらかじめ定義された高さのヘッダーがある (上記の例では 100% コンポーネント ヘッダー パーツ)
c. 高さ「コンテンツ div の 100%」-「ヘッダーの高さ」(上記の例では 100% コンポーネント コンテンツ) の子 div があります。
d. 「ラッパー div の高さからコンポーネント div の高さの合計を引いた値」より高くならないようにします (スクロールバーは問題ありません)。