欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-30 20:28:25
html: 左侧导航
右侧内容
&......
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

相关标签: 经验分享 html+css

上一篇: 荐 css 理解margin负值对浮动元素的影响

下一篇: 老总趣事搞笑话经典

推荐阅读