具有固定页眉和页脚以及可滚动内容的Flexbox
具有固定页眉和页脚以及可滚动内容的Flexbox
提问于 2017-12-06 01:47:15
我正在尝试做一个flexbox的设计。我不是HTML/css专家。:(
我有一个固定的页眉和页脚和内容，占据了页面的其余可用房地产的flexbox设计。
当我将数据放入比可用空间更长的内容区域时，内容会滚动。但我想实现一个不同的目标。
我希望在内容区域中有几个div (彼此下面)，每个div应该与内容区域一样高(即使内容很小)，因此我在内容区域内有一种分页。
几天来，我试了很多，读了很多书，但就是不能让它工作。如何让可滚动内容区域内的div占据整个空间(高度)？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-06 03:46:41
你可以这样做：
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>
Stack Overflow用户
发布于 2017-12-06 02:34:39
听起来你想要的是内容部分中的多个元素，这些元素基本上占据了整个页面的大小，但你可以滚动浏览。
让我们将内容部分中的这些元素称为“幻灯片”。
要实现这一点，最简单的方法是设置这些元素的最小尺寸，例如-
.content .slide {
min-width:100vw;
min-height:100vh;
}这将确保，即使幻灯片中的内容不会占据整个空间，它也会保持完整的大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47659664
复制相关文章
相似问题