三栏布局(垂直方向)的四种方案

作者: deepwinter 分类: 前端 发布时间: 2019-05-20 14:48 点击量: 469 次阅读

要求:
假设宽度已知,其中上栏,下栏高度各为100px,中间高度自适应。
总结:
在正常情况下,以下四种方案都能达到要要求。但是当中间栏的内容较多时,方案3的表格布局解决方案会占据上栏和下栏的空间,所以不建议采用。


方案1:绝对定位解决方案

html部分:

<section class="layout">
    <div class="top"></div>
    <div class="center">
        <h1>绝对定位解决方案</h1>
        <p>这是三栏布局中间部分</p>
        <p>这是三栏布局中间部分</p>
    </div>
    <div class="bottom"></div>
</section>

css部分:

.layout div{
    min-height: 100px;
    width: 100%;
    position: absolute;
}
.layout{
    height: 100vh;
    position: relative;
}
.top{
    top: 0;
    background-color: red;
}
.bottom{
    bottom: 0;
    background-color: blue;
}
.center{
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background-color: yellow;
}

方案2:flexbox解决方案

html部分:

<section class="layout">
    <div class="top"></div>
    <div class="center">
        <h1>flexbox解决方案</h1>
        <p>这是三栏布局中间部分</p>
        <p>这是三栏布局中间部分</p>
    </div>
    <div class="bottom"></div>
</section>

css部分:

.layout div{
    min-height: 100px;
}
.layout{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.top{
    background-color: red;
}
.bottom{
    background-color: blue;
}
.center{
    flex: 1;
    background-color: yellow;
    overflow: auto;
}

方案3:表格布局解决方案

html部分:

<section class="layout">
    <div class="top row">
        <div class="top-cell cell"></div>
    </div>
    <div class="center row">
        <div class="center-cell cell">
            <h1>表格解决方案</h1>
            <p>这是三栏布局中间部分</p>
            <p>这是三栏布局中间部分</p>
        </div>
    </div>
    <div class="bottom row">
        <div class="bottom-cell cell"></div>
    </div>
</section>

css部分:

.layout .row{
    display: table-row;
    min-height: 100px;
}
.layout .cell{
    display: table-cell;
}
.layout{
    height: 100vh;
    width: 100%;
    display: table;
}
.top{
    background-color: red;
}
.bottom{
    background-color: blue;
}
.center{
    overflow: auto;
    background-color: yellow;
}

方案4:网格布局解决方案

html部分:

<section class="layout">
    <div class="top"></div>
    <div class="center">
        <h1>网格解决方案</h1>
        <p>这是三栏布局中间部分</p>
        <p>这是三栏布局中间部分</p>
    </div>
    <div class="bottom"></div>
</section>

css部分:

.layout{
    height: 100vh;
    display: grid;
    grid-template-rows: 100px auto 100px;
    grid-template-columns: 100%;
}
.top{
    background-color: red;
}
.bottom{
    background-color: blue;
}
.center{
    overflow: auto;
    background-color: yellow;
}

转自:https://www.jianshu.com/p/724c965a93f4

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注