CSS3 | 实现剩余高度占用

前言

在前端布局中，常有使某一部分占用容器剩余高度的布局需求。我们可以使用calc+百分比布局+border-box解决问题，但此方法不仅繁琐，且无法应对已知部分宽度不定的情况。
当仅考虑IE10以上浏览器时，我们可以选择flex布局即弹性盒子。

案例

    <div class="container">
        <div class="header">
            <p>1p>
            <p>2p>
        div>
        <div class="content">div>
    div>

在本例中，container为容器，header部分宽度不定，由内容撑开，若要使content挤占容器的剩余高度，可以用flex布局来实现，代码如下：

 .container{
            display: flex;
            flex-direction: column;
            
            height: 500px;
            border:dashed
        }
        .header {
            background: royalblue;
        }
        .content {
            flex:1;
            
            padding: 20px;
            background: orangered;
            border:solid;
        }

实现效果：

解析

如上图，使用flex布局，可以简单利落地解决问题，且无需担心内边距和边框带来的溢出问题。flex布局是CSS3追加的新格式化上下文，规则和属性较多，本文仅解释涉及的属性。

1. 为容器设置display:flex，则容器下的子元素将遵循flex布局，成为弹性盒子，flex-direction: column指定弹性盒子内内元素的排列方式为列排列，即垂直方向排列。

 .container{
            display: flex;
            flex-direction: column;
        }

2. 为元素设置flex:1，flex属性为flex-grow,flex-shrink和flex-basis的简写属性，flex-grow,flex-shrink,flex-basis分别代表元素在弹性盒子扩张，收缩和默认状态下的空间占比。当仅有content设置占比时，代表其占据所有剩余空间。

  .content {
            flex:1;
        }