6.实现页面上下分区效果(div盒子自动撑开边框带)阴影

重点代码（可以让div盒子自动撑开并且四周都有阴影以便实现页面上下布局）：

            min-width: 200px;
            max-width: 100%;
            min-height: 400px;
            max-height: 100%;

1.先看实现的效果：

当内容在一屏的范围内显示的效果图:

• 

  页面上下分区.PNG
  
  

  当下方内容超过最小高度后的效果图：

• 

  top.PNG

代码：

    <style>
        .b-top {
            height: 200px;
            max-width: 100%;
            margin-left: 50px;
            margin-right: 50px;
            background-color: salmon;
            box-shadow: 1px 1px 5px 10px rgba(228, 223, 223, 0.6);
            text-align: center;
        }
        .b-footer {
            min-width: 200px;
            max-width: 100%;
            min-height: 400px;
            max-height: 100%;
            background-color: pink;
            box-shadow: 1px 1px 5px 10px rgba(228, 223, 223, 0.6);
            margin-top: 50px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            text-align: center;
        }
    </style>

    <div class="b-top">
        上方
    </div>
    <div class="b-footer">
        下方
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        dfasfdfdsafafd
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        fdfdfdfdfdf
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        dfdfdfdf
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
        <hr>
        <br>
    </div>