flex全屏显示结合overflow-y:auto实现内容溢出滚动

在网页布局中,特别是后台管理系统布局的时候,很多时候需要使用全屏显示。全屏中的局部内容超出滚动。

随着各大浏览器的升级,flex布局逐渐在网页布局中广为应用。使用flex布局不仅灵活而且高效。

在单页应用中,使用flex布局的时候如何实现全屏且滚动呢,有时候会出现没有效果的问题:

  1. 最外层容器,全屏

    .container {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
  2. 在容器中一部分给固定高度,另一部分给flex:1;

    .header {
        width: 100%;
        height: 80px;
    }
    
     .content {
        flex: 1;
        border: 2px solid orange;
        position: relative;  // 要在子组件中实现滚动,需设置
    }
    
  3. 子组件中设置

    .page_container {
        position: absolute; // 使用定位,否则可能会滚动条失效
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 3px solid yellow;
    }
    
  4. 子组件中的子组件继续依次方法即可实现

你可能感兴趣的:(web)