固定ヘッダーとフッターとスクロール可能なコンテンツを持つFlexbox

Question

フレックスボックスのデザイン作業をしようとしています。私はHTML/CSSの専門家ではありません。 :(

私はページの利用可能な不動産の残りの部分を占め、固定ヘッダとフッタおよびコンテンツとフレキシボックスのデザインを持っている。

私はもうその利用可能なスペースよりもコンテンツ領域にデータを置きます

私はコンテンツエリアに複数のdivがありた​​いと思っています。各divはコンテンツエリアと同じ高さでなければなりません（たとえコンテンツがスクロールしていても私はコンテンツエリア内でページングの種類を持っています。

私はトリたくさん編集して読んでいますが、それを動作させることはできません。スクロール可能なコンテンツエリア内のdivを全体のスペース（高さ）を占めるようにするにはどうすればよいですか？

Answer 1

あなたは、おそらくこのような何かを達成したい：

* {box-sizing:border-box} 
 
html, body, #container {margin:0;width:100vw;height:100vh} 
 

 
#container, 
 
.content { 
 
    display: flex; /* displays children inline by default, that's why we need to change the direction */ 
 
    flex-direction: column; /* now it stacks them vertically */ 
 
} 
 

 
header { 
 
    padding: 10px; 
 
    background: red; 
 
} 
 

 
main { 
 
    flex: 1; /* takes the remaining vertical space inside the #container */ 
 
    overflow: auto; 
 
} 
 

 
section { 
 
    flex: 0 0 auto; /* or: flex-shrink: 0; */ 
 
    height: 100%; /* takes the remaining (visible) vertical space inside the main */ 
 
    margin-bottom: 1px; /* just for presentation/separation purposes */ 
 
    padding: 10px; 
 
    background: green; 
 
    overflow: auto; /* recommended */ 
 
} 
 

 
footer { 
 
    padding: 10px; 
 
    background: blue; 
 
}

<div id="container"> 
 
    <header>top</header> 
 
    <main> 
 
    <section>1st</section> 
 
    <section>2nd</section> 
 
    <section>3rd<br> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> 
 
    </section> 
 
    <section>4th</section> 
 
    <section>5th</section> 
 
    </main> 
 
    <footer>bottom</footer> 
 
</div>

Answer 2

コンテンツセクションの複数の要素は基本的にはページ全体をサイズにしていますが、スクロールすることができます。

コンテンツセクションの「スライド」でこれらの要素を呼び出してみましょう。

これは、これらの要素の最小寸法を設定することです達成するための最も簡単な方法は、のようなもの -

.content .slide { 
    min-width:100vw; 
    min-height:100vh; 
} 

これは、スライドの内のコンテンツは、全体を占有していない場合でも、確認しますスペースは、フルサイズのままです。