0

ここで提供されているようなソリューションを実装しようとしています: 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>

http://jsfiddle.net/UrcV7/

FFで必要に応じて機能します（contentRel divの高さは320pxに設定されています-ラッパーdivの高さからコンポーネントdivの高さの合計を引いたものです）が、IEでは機能しません：（contentRel divの高さが400pxに設定されています-と同じラッパー div の高さ)。誰もそれを修正する方法を知っていますか?

これが私の問題の説明です（おそらくそれは別の解決策です）：

  1. 高さをいくつかの px 値に設定した外部 div があります (例ではラッパー div)。
  2. その div には、いくつかの JS コードによって動的に非表示にできる他の div がいくつかあります。
  3. 1 を除くすべての div にはある程度の高さがあります。私には不明ですが（例ではコンポーネントのdiv）。

残りの 1 つの div (例ではコンテンツ div) を次のようにします。

を。ラッパー div の残りの高さをすべて使用する

b. あらかじめ定義された高さのヘッダーがある (上記の例では 100% コンポーネント ヘッダー パーツ)

c. 高さ「コンテンツ div の 100%」-「ヘッダーの高さ」(上記の例では 100% コンポーネント コンテンツ) の子 div があります。

d. 「ラッパー div の高さからコンポーネント div の高さの合計を引いた値」より高くならないようにします (スクロールバーは問題ありません)。

4

0 に答える 0