他の2つの間のストレッチ（垂直）中間のdiv

Question

中間のdivを伸ばす方法は、他の2つの間の残りのスペース（ヘッダー、フッター）を高さが制限されるようにします。 3つはすべてビューポート空間の100％をカバーする親要素内に配置されます。条件はすべて3つのdivがコンテンツの相対的なものでなければならないが、限界（max-height）（中間のものを除く）であるため、絶対的な位置付けはありません。それらは同じ親要素を持たなければなりません。私は同じように解決しましたが、problemが見つかりましたが、私が探しているのではなく、私のコンセプトに適用したいのと全く同じ動作をしているテーブル構造が使用されていました。

ここではcodepenですが、私はまだそれを解決する方法を見つけませんでした。もう1つ、私はJSを使いたくありません。

UPDATE用いずまた flexbox、calc()、tables。

Answer 1

CSSテーブル（ない実際のテーブル）

body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    height: 100vh; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
header, 
 
footer { 
 
    max-height: 25vh; 
 
    display: table-row; 
 
    background: lightblue; 
 
} 
 
main { 
 
    height: 100%; 
 
    background: pink; 
 
    display: table-row; 
 
}

<div class="parent"> 
 
    <header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p> 
 
    </header> 
 
    <main> 
 
    <p>content</p> 
 
    </main> 
 
    <footer> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p> 
 
    </footer> 
 
</div>

Support少なくともIE8まで良好です。

しかし、私はこの解決策を推奨できませんが、OPによってこれに課せられた異常な制限が与えられた場合、これは唯一の残りのCSSソリューションAFAIKです。