flexbox子级能否具有溢出滚动条? [英] Can flexbox children have overflow scrollbar(s)?
问题描述
我想使用 CSS3 flexbox模型创建跨设备布局,并找到 HugoGiraudel的一个不错的示例布局,用作起点.
I'd like to use the CSS3 flexbox model to create a cross-device layout and found a nice example layout by HugoGiraudel which I used as a starting point.
布局基本上是这样的:
这是HTML的结构:
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
...
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
这是CSS最重要的部分:
Here the most important parts of the CSS:
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.aside { flex: 1 auto; }
.main { flex: 3 0px; }
我的问题是,当文章包含的内容超出屏幕显示的内容时,外部.wrapper
旁边会出现一个垂直滚动条,并且页脚不再可见.
My problem is when the article contains more content than fits on the screen, a vertical scrollbar appears next to the outer .wrapper
and the footer isn't visible any more.
我尝试将overflow: scroll
和flex-flow: column wrap
添加到文章的样式中,但是没有成功-滚动条是可见的,但是文章总是会完全包含其内容.
I tried to add overflow: scroll
and flex-flow: column wrap
to the article's styling, but without success - the scrollbars are visible but the article always grows to completely enclose its contents.
如果内容增加,如何保持页脚可见并滚动文章?
How can I keep the footer visible and the article scrolling if the contents grow?
推荐答案
您的文章内容扩展了整个版式的原因是它没有任何高度限制.像max-height
这样的东西会限制它的增长,然后会出现一个垂直滚动条.
The reason your article content expands the whole layout is that it doesn't have any height limitation. Something like max-height
would limit its growth, and then a vertical scrollbar could appear.
以下是您的代码,进行了一些调整:
Here's your code with a few adjustments:
HTML (为文章和助手添加了一个嵌套的flex容器)
HTML (added a nested flex container for article and asides)
<div class="wrapper">
<header class="header">Header</header>
<section class="inner-wrapper">
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas...</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas...</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas...</p>
.
.
.
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
</section>
<footer class="footer">Footer</footer>
</div>
CSS (仅用于按键调整)
html, body {
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column; /* switch main container from row direction */
}
.inner-wrapper {
display: flex; /* nested flex container; row direction */
flex: 0 0 50%; /* limit height of container; adjust as necessary */
min-height: 0; /* addresses a scrolling bug in Firefox;
http://stackoverflow.com/a/34982902/3597276 */
}
.header {
flex: 1; /* header to occupy all available height */
}
.footer {
flex: 1; /* footer to occupy all available height */
}
.main {
overflow-y: scroll; /* enable vertical scrollbar */
}
注意:
- 现在主伸缩容器(
.wrapper
)具有三个垂直堆叠的伸缩项. - 每个项目的高度都可以单独设置.在上面的代码中,告诉页眉和页脚消耗所有可用空间(
flex: 1
).中间的flex项目(.inner-wrapper
)被限制为50%,从而可以滚动.尝试使用25%和75%的替代示例. - 中间的项目还可以用作flex容器,并对齐物品和水平放置的侧面.每个项目的宽度可以单独设置.上一点也适用于此.
- Now the main flex container (
.wrapper
) has three flex items stacked vertically. - The height of each item can be set individually. In the code above, the header and footer are told to consume all available space (
flex: 1
). The middle flex item (.inner-wrapper
) is confined to 50%, which enables scrolling. Try 25% and 75% for alternative examples. - The middle item doubles as a flex container, and lines up the article and asides horizontally. The width of each item can be set individually. The previous point applies here, as well.
这篇关于flexbox子级能否具有溢出滚动条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!