我們可以看到現(xiàn)在很多網(wǎng)站的后臺(tái)管理系統(tǒng)、某東就能看到左側(cè)鋪滿，右側(cè)進(jìn)行自適應(yīng)內(nèi)容填充的頁(yè)面，那么我們?cè)趺从煤?jiǎn)單的CSS+DIV實(shí)現(xiàn)呢，核心代碼下文附上了。簡(jiǎn)單使用的flex布局就能實(shí)現(xiàn)。

image.png

那么我們簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的效果吧!

DIV

頁(yè)面的核心div布局，總結(jié)一下就是三個(gè)盒子

image.png

// 盒子的實(shí)現(xiàn)核心代碼
<div class="content">
        <div class="box">
            <ul class="ulbox">
                <li>第一個(gè)</li>
                <li>第二個(gè)</li>
                <li>第三個(gè)</li>
                <li>第四個(gè)</li>
            </ul>
        </div>
        <div class="rightBox">
            <div>這是右邊的盒子</div>
        </div>
    </div>

CSS

頁(yè)面的核心css布局代碼，重點(diǎn)就是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;
}

實(shí)現(xiàn)效果

最后我們看一下實(shí)現(xiàn)之后的效果圖吧

image.png