如何让下面灰色高的撑满全屏？就是.finished那部分，左右也撑满！

如何让上半部分背景为白色，下半部分背景为灰色？灰色部分左右上下都撑开？
如何灰色高度撑满？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<style type="text/css" media="screen">
    *,ul,li,div,p,span{
    padding:0;
    margin:0;
}
html,body{
    height:100%;
}
.containers{
    
}
.wrap{
    padding:0 1.6rem 0 1.6rem;
}
.ongoing{
    height:16.6rem;
    border:0.1rem rgb(0, 0,0 ,0.11) solid;
}
ul li{
    padding:0.8rem 0 ;
}

ul li p{
    display: inline-block;
    font-size:1.2rem;
    color:rgba(0,0,0,0.54);
    padding-right: 1.2rem;
}

ul>li:nth-child(1)>p{
    font-size: 1.4rem;
}
ul>li:nth-child(1){
    padding:2.4rem 0 0.8rem 0;
}

.ongoing .loan p:nth-child(3){
    color: rgba( 255 ,41 ,41,0.69);
}
.ongoing .repay p:nth-child(2),.fnished .repay p:nth-child(2){
    color: rgba( 255 ,41 ,41,0.69);
}
.ongoing .num p:nth-child(3),.finished .num p:nth-child(3){
    color: rgba(  33, 150 ,245,1);
}

.finished{
    height:100%;
    background: rgb(242, 242, 242);
}
</style>
<body>
<div class="containers">
    <div class="wrap">
        <div class="ongoing">
            <ul>
                <li class="loan">
                        <p>借款金额</p>
                        <p>5000</p>
                        <p>进行中</p>
                </li>
                <li class="loandate">
                          <p>借款日</p>
                         <p>2016-08-05</p>
                </li>
                <li class="deadline">
                      <p>还款期限</p>
                      <p>５个月</p>
                </li>
                <li class="repay">
                      <p>已还</p>
                      <p>1/5个月</p>
                </li>
                <li class="num">
                      <p>借款编号</p>
                    <p >5000</p>
                    <p>《借款协议》</p>
                </li>
            </ul>
        </div>

        <div class="finished">     
                   <ul>
                <li class="loan">
                        <p>借款金额</p>
                        <p>5000</p>
                        <p>进行中</p>
                </li>
                <li class="loandate">
                          <p>借款日</p>
                         <p>2016-08-05</p>
                </li>
                <li class="deadline">
                      <p>还款期限</p>
                      <p>５个月</p>
                </li>
                <li class="repay">
                      <p>已还</p>
                      <p>1/5个月</p>
                </li>
                <li class="num">
                      <p>借款编号</p>
                    <p >5000</p>
                    <p>《借款协议》</p>
                </li>
            </ul>

        </div>      
    </div>
</div>
</body>
</html>

用 flexbox 的方式，設置 flex: 1 可以讓其自動平均分配高度

jsFiddle

把wrap删了，ongoing/finished 设置background-color， ul 设置padding-left为50px。

看 https://fiddle.jshell.net/6e4sufrc/1/

【热门文章】