html、bodyをmin-height：100％で設定しているだけでなく、expandを可能にする

Question

html/bodyをcss（何らかの形で）を使って最低100％の高さにすることが可能かどうか、必要に応じて？今はボディが残りのスペースを取るフレックスボックスを持っています（期待通り）。

ライブウェブサイトでは、本文全体がページを占めていない可能性があります。そのため、フレックスボックスにその枠を埋めるようにしたいのですが、小さな画面（モバイル）ほとんどの場合、可視の画面を埋めるでしょう。この時点で（または、本体が画面をいっぱいにしてしまった場合）、私はフッターを気楽に続けてください。

フレックスボックスコンテナに枠線を描画しないと、意図したとおりに動作しているようです。しかし、投機的な理由から、コンテナの境界/サイズが重要な場合は、正しく描画することが可能です（オーバーフローがちょうどハッキーな仕事のように見えるという事実は無視してください）。

また、私は今のjavascriptの答えを受け付けますが、

html, body { 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

Answer 1

ちょうどあなたのラッパーにheightをmin-heightを使用する代わりに、CSSが最適になります。

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

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    min-height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.body { 
 
    flex: 1; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header style="background-color: lightblue"> 
 
    header 
 
    </header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3"> 
 
    body 
 
    </div> 
 
    <footer style="background-color: yellow"> 
 
    footer 
 
    </footer> 
 
</div>

Answer 2

標準percentage heightsで動作させることができます。しかし、これはややこしい、そして、率直に言って、不必要です。ちょうどviewport percentage unitsを使用してください。

ここにあなたのコードの簡易版です。

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    border: 1px solid black; 
 
} 
 

 
.body { 
 
    flex: 1 0 300px; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <header style="background-color: lightblue">header</header> 
 
    <div class="body" style="background-color: orange; opacity: 0.3;">body</div> 
 
    <footer style="background-color: yellow">footer</footer> 
 
</div>