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

性野喜悲

已于 2022-10-31 10:03:02 修改

阅读量5.2k

点赞数

分类专栏：经验分享 html+css 文章标签：前端 html css

于 2020-07-15 10:30:18 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/107354387

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

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;

}