あふれさせずに空き領域を埋める

Question

htmlでデスクトップアプリケーションのユーザーインターフェイスを作成しようとしていますが、達成したいのは固定されたヘッダーとフッターです。フレックスを使用しようとしていましたが、オーバーフローで終わるほとんどすべての試行でどのように動作するのかは分かりません。

フィドル http://jsfiddle.net/4dxperkp/

section { 
    display: flex; 
    flex-flow: column; 
} 

header { 
    background: tomato; 
} 

div { 
    background: gold; 

    height: 100vh; 
} 

footer { 
    background: tomato; 
} 

私も-webkit-fill-available accrossに来たが、それは同様にオーバーフローを引き起こしてしまいます。以下のような（動的な高さの計算のための）JavaScriptを使用してmin-heightで

Answer 1

使用CSSのcalc()機能：

var heightHeader = $('header').height(); 
var heightFooter = $('footer').height(); 
var mainHeight = heightHeader + heightFooter; 
var divHeight = 'calc(100vh - ' + mainHeight + 'px)'; 

$('.main-content').css('min-height', divHeight); 

が更新Fiddleを見てください。

希望すると便利です。

Answer 2

section { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100vh;   /* the container always has full height of the viewport */ 
 
} 
 
header { 
 
    background: tomato; 
 
} 
 
div { 
 
    flex: 1;    /* the content div always consumes all free space */ 
 
    background: gold; 
 
    overflow: auto; 
 
} 
 
footer { 
 
    margin-top: auto;  /* the footer is always pinned to the bottom */ 
 
    background: lightgreen; 
 
    min-height: 60px; 
 
} 
 

 
body { margin: 0; }

<section> 
 
    <header> 
 
    header: sized to content 
 
     <br/>(but is it really?) 
 
    </header> 
 
    <div> 
 
    main content: fills remaining space<br> 
 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
 
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> 
 
    </div> 
 
    <footer> 
 
    footer: fixed height in px 
 
    </footer> 
 
</section>