左右布局,左侧导航固定宽度且高度撑满整个屏幕,右侧内容宽度自适应
程序员文章站
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
下一篇: 老总趣事搞笑话经典