は、私は次のdiv要素に</p> <pre><code><div class="top"> <div class="inner1"></div> <div class="inner2"></div> <div class="inner3"></div> </div> </code></pre> <p>を持つdivのフィット残りの高さ

Question

を作ることはここにCSSです：

.top { 
    height: 100vh; 
} 

.div1 { 
    min-height: 215px; 
    box-sizing: border-box; 
    height: 30vh; 
} 

.div2 { 
    box-sizing: border-box; 
    min-height: calc(100vh - 30vh - 265px); 
    padding-top: 2.5em; 
    margin-top: 0; 
    display: table; 
} 

.div3 { 
    min-height: 265px; 
    box-sizing: border-box; 
    background: white; 
    display: table; 
    width: 100%; 
    font-weight: 700; 
    padding-bottom: 42px; 
} 

私はカルク（100VH 265px - - 30vh）を使用しない分を設定します-height of div 2.残りの高さ（div2の高さ= 100vh - div1の高さ - div2の高さを意味する）をどのように持つことができますか？

ここではフレックスが役に立つと思っていますが、どのようにそれを使用するかについてはかなり確信しています。本当に感謝します。

ありがとうございます。

これを重複としてマークする前に、私はflexを試してみましたが、IE11ではうまく動作しません。

Answer 1

ブラウザの制限を克服するには、それがベストアイデアかどうかわかりませんが、通常はJavaScriptを使用して再計算します。私はjavascript関数を書いて、ウィンドウのサイズ変更とロード時にそれを起動します。フレックス横に

// some jQuery 
 
function adjustHeight() { 
 
var fullHeight = $(window).height(); 
 

 
var neededHeight = fullHeight - fullHeight*0.3 - 263; 
 

 
$('.div2').css('min-height', neededHeight + 'px'); 
 

 
} 
 

 

 
$(document).ready(function(){ adjustHeight(); });

Answer 2

、表示：表のプロパティは、古いブラウザ用にも役立つかもしれません。この場合の高さが

はそれがIE11で正常に動作する必要分の高さ

.top { 
 
    height: 100vh; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.top>div { 
 
    display: table-row; 
 
} 
 
.inner1 { 
 
    min-height: 215px;/* becomes useless */ 
 
    box-sizing: border-box; 
 
    height: 30vh; 
 
    background: tomato; 
 
} 
 
.inner2 { 
 
    box-sizing: border-box; 
 
    padding-top: 2.5em;/* i'll get squeezed here */ 
 
    margin-top: 0;/* useless, border-spacing is to be used */ 
 
    background: turquoise; 
 
} 
 
.inner3 { 
 
    height: 265px; 
 
    box-sizing: border-box; 
 
    background: yellow; 
 
    display: table; 
 
    width: 100%; 
 
    font-weight: 700; 
 
    padding-bottom: 42px;/* ? :) */ 
 
}

<div class="top"> 
 
    <div class="inner1">1</div> 
 
    <div class="inner2">run me in full page to see how i behave :)</div> 
 
    <div class="inner3">3</div> 
 
</div>