左右布局,左侧导航固定宽度且高度撑满整个屏幕,右侧内容宽度自适应

html:      

  <div class="container">

            <div class="stable-nav">左侧导航</div>

            <div class="change-content">

                <div class="header-panel">右侧内容</div>

            </div>

        </div>

css:

.stable-nav {

    /*固定宽度*/

    width: 2.37rem;
    height: 100%;

    position: fixed;

    left: 0;

    top: 0; 

    background: url(../images//nav/nav_back1.png);//背景图片地址

    box-shadow: 0rem 0.03rem 0.06rem rgba(223, 230, 235, 0.16);

    

}

.change-content {

    /*这里设置为占比1，填充满剩余空间*/

    flex: 1;

    padding: 0 0 0.6rem 0;

    margin-left: 2.37rem;

/* 避免左侧导航被挤掉 */

    min-width: 0;

}

 

本文地址：https://blog.csdn.net/leng0920/article/details/107354387