CSS自适应布局（一）

2018-03-16

在写网页布局时，经常会遇到左侧固定宽度，右侧自适应宽度的需求。而我每次都要 Google 一遍，那索性就自己梳理一遍吧，以后看自己的文章就好了。

HTML

<div class="container">
    <aside></aside>
    <section></section>
</div>

方案一： 使用 flex 布局

.container {
    display: flex;
    flex-direction: row;
    height: 100%;
    aside {
        width: 200px;
        height: 100%;
        background-color: #1d13fe;
    }
    section {
        flex: 1;
        height: 100%;
        background-color: #52e6ff;
    }
}

利：灵活，即便是在右侧新增一个固定宽度的侧边栏，非常简单快捷。

弊：flex 为 CSS3 新增的属性值，兼容性较差，但是现在有很多兼容性的解决方案，开发者不必过多担心。

方案二： 使用 calc CSS 函数

.container {
    font-size: 0;
    height: 100%;
    aside {
        display: inline-block;
        width: 200px;
        height: 100%;
        background-color: #1d13fe;
    }
    section {
        display: inline-block;
        width: calc(~"100% - 200px");
        height: 100%;
        background-color: #52e6ff;
    }
}

利：同上，对上下文不会产生消极影响

弊：calc 函数是 CSS3 新增的，IE9+、FF4.0+、Chrome19+、Safari6+ 较好支持，移动端的浏览器仅“firefox for android 14.0”支持

方案三： 使用 float 布局

通常这样写

.container {
    height: 100%;
    aside {
        float: left;
        width: 200px;
        height: 100%;
        background-color: #1d13fe;
    }
    section {
        height: 100%;
        margin-left: 200px;
        background-color: #52e6ff;
    }
}

也可以参考方案二

.container {
    height: 100%;
    aside {
        float: left;
        width: 200px;
        height: 100%;
        background-color: #1d13fe;
    }
    section {
        float: left;
        width: calc(~"100% - 200px");
        height: 100%;
        background-color: #52e6ff;
    }
}

利：无兼容性问题

弊：由于使用了传统的浮动布局，需要清楚浮动

最后的效果图 窄 宽