我們可以看到現(xiàn)在很多網(wǎng)站的后臺管理系統(tǒng)征懈、某東就能看到左側(cè)鋪滿鸣剪，右側(cè)進行自適應(yīng)內(nèi)容填充的頁面，那么我們怎么用簡單的CSS+DIV實現(xiàn)呢花颗，核心代碼下文附上了捕传。簡單使用的flex布局就能實現(xiàn)。
image.png
那么我們簡單的實現(xiàn)頁面的效果吧!
DIV
頁面的核心div布局扩劝，總結(jié)一下就是三個盒子
image.png
// 盒子的實現(xiàn)核心代碼
<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;
}
實現(xiàn)效果
最后我們看一下實現(xiàn)之后的效果圖吧
image.png
