Html 如何在全高应用程序中结合 flexbox 和垂直滚动

发布于02月20日

我想使用flexbox的全高应用程序.我在这个链接中找到了我想要的使用旧flexbox布局模块(display: box;和其他东西)的内容:CSS3 Flexbox full-height app and overflow

对于只支持旧版本flexbox CSS属性的浏览器来说，这是一个正确的解决方案.

如果我想try 使用较新的flexbox属性，我将try 在同一链接中使用第二个解决方案，作为一个黑客:使用一个包含height: 0px;的容器.它使得显示一个垂直滚动.

我不太喜欢它，因为它会带来其他问题，与其说是解决方案，不如说是一种变通方法.

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

我还准备了一个带有基本示例的JSFdle:http://jsfiddle.net/ch7n6/

这是一个全高的HTML网站，由于内容元素的flexbox属性，页脚位于底部.我建议你在CSS代码和结果之间移动条来模拟不同的高度.

Html 如何在全高应用程序中结合 flexbox 和垂直滚动

推荐答案

Html相关问答推荐

css网格区域的布局不展开，也不显示滚动条

我需要主页按钮出现在中间

D3.js—分组条形图—更新输入数据时出错

Tailwincss：自动设置网格高度

为什么在CSS中字段是一个有效的 colored颜色名称？

为什么在移动视图中，这个水平可滚动的表格会在表格的右侧显示额外的空间？

水平卷轴的内容保持堆叠

带有下拉菜单的完整css导航-链接不起作用？

如何使活动选项卡背景作为父背景图像

按钮悬停效果不影响按钮内的图标

我的 *ngFor 中的 array.reverse() 在生产中不起作用

标题在实时网站上闪烁

将组件移动到页面底部 Angular

CSS 字母间距将按钮向右扩展

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

标签背景 colored颜色的 html 和 css 技巧说明

为什么在使用src与srcdoc时 iframe 内容高度呈现不同？

右对齐 bootstrap 导航项而不是下拉菜单

如何将 img 元素定位到特定位置？

CSS 网格自动高度不适用于特定网格区域