flex全屏显示结合overflow-y:auto实现内容溢出滚动
在网页布局中,特别是后台管理系统布局的时候,很多时候需要使用全屏显示。全屏中的局部内容超出滚动。随着各大浏览器的升级,flex布局逐渐在网页布局中广为应用。使用flex布局不仅灵活而且高效。在单页应用中,使用flex布局的时候如何实现全屏且滚动呢,有时候会出现没有效果的问题:最外层容器,全屏.container {position: fixed;width: 100...
·
在网页布局中,特别是后台管理系统布局的时候,很多时候需要使用全屏显示。全屏中的局部内容超出滚动。
随着各大浏览器的升级,flex布局逐渐在网页布局中广为应用。使用flex布局不仅灵活而且高效。
在单页应用中,使用flex布局的时候如何实现全屏且滚动呢,有时候会出现没有效果的问题:
-
最外层容器,全屏
.container { position: fixed; width: 100%; height: 100%; display: flex; flex-direction: column; }
-
在容器中一部分给固定高度,另一部分给flex:1;
.header { width: 100%; height: 80px; } .content { flex: 1; border: 2px solid orange; position: relative; // 要在子组件中实现滚动,需设置 }
-
子组件中设置
.page_container { position: absolute; // 使用定位,否则可能会滚动条失效 width: 100%; height: 100%; display: flex; flex-direction: column; border: 3px solid yellow; }
-
子组件中的子组件继续依次方法即可实现
更多推荐
已为社区贡献2条内容
所有评论(0)