我正在尝试使flexbox设计工作。我不是HTML / css专家。:(
我有一个具有固定页眉和页脚以及内容的flexbox设计，该内容占据页面的其余可用空间。
当我将数据放在比可用空间长的内容区域中时，内容将滚动。但我想实现另一件事。
我想在内容区域中有几个div（彼此下面），每个div应该与内容区域一样高（即使内容很小），因此我在内容区域中有一种分页。
几天来，我做了很多尝试，读了很多书，但无法正常工作。如何使可滚动内容区域内的div占据整个空间（高度）？
您可以执行以下操作：
html, body {
margin: 0;
height: 100%; /* can also use viewport units (height: 100vh) */
}
#container {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
main {
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}
section {
height: 100%; /* takes the visible area of the "main" div */
overflow: auto; /* recommended */
border-bottom: 1px solid;
background: lightgreen;
}
header {background: #f88}
section:last-child {border: none}
footer {background: lightblue}<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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句