CSS-ページ高さ適応舗装スクリーン

HTML:
3つの部分を含んで、1つは全体のdivを包んで、1つは上半分のdivで、1つは下半分のdivです

CSS:
実装効果は主にcssのdisplay属性に依存し、display:-webkit-flexに設定されます.現在サポートされているブラウザには、IE 10+と比較的新しいFireFox、Chromeがあります.
pannelのheightは100 vhで、画面の大きさに応じて画面全体に適応し、画面サイズの100%を占めることを示し、display属性は-webkit-flexに設定され、デフォルトの配列は水平になり、-webkit-flex-direction:column;垂直に並べてdivを上下に並べます.
Inner 1のheightをautoに設定することで、前半の高さをコンテンツに応じて適応させることができる.
Inner 2のheightはinherit属性に設定されており、下半部は上半部の高さに応じてpannelが敷かれた残りの部分に自動的に適応することができる.

.panel{
    background: aliceblue;
    overflow: auto;
    height:100vh;
    display: -webkit-flex;
    -webkit-flex-direction: column;
}
.inner1{
    background:red;
    width: 100%;
    height: auto;
    position: relative;
}
.inner2{
    background:brown;
    width: 100%;
    height: inherit;
    position: relative;
}