实现左侧铺满右侧自适应的两栏布局

我们可以看到现在很多网站的后台管理系统、某东就能看到左侧铺满，右侧进行自适应内容填充的页面，那么我们怎么用简单的CSS+DIV实现呢，核心代码下文附上了。简单使用的flex布局就能实现。

image.png

那么我们简单的实现页面的效果吧!

DIV

页面的核心div布局，总结一下就是三个盒子

image.png

// 盒子的实现核心代码
<div class="content">
        <div class="box">
            <ul class="ulbox">
                <li>第一个</li>
                <li>第二个</li>
                <li>第三个</li>
                <li>第四个</li>
            </ul>
        </div>
        <div class="rightBox">
            <div>这是右边的盒子</div>
        </div>
    </div>

CSS

页面的核心css布局代码，重点就是flex布局和position

li{
    padding-bottom: 20px;
    list-style: none;
}
.content{
    display: flex;
    align-items: flex-start;
}
.box{
    flex: 0 0 auto;
    background-color: gray;
    height: 100%;
    width: 120px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.rightBox{
    flex: 1 1 auto;
    background-color: pink;
    height: 100%;
    position: absolute;
    left: 120px;
    right: 0;
    bottom: 0;
}

实现效果

最后我们看一下实现之后的效果图吧

image.png