javascript - html高度自适应

不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？
不需要考虑低版本浏览器。

<code>
    
    
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        html,body         {width: 100%;height: 100%;}
        </style>
    
    
        <div style="height:100px">top</div>
        <div>middle</div>
        <div style="height:100px">bottom</div>
    
    
</code>

比如上面的middle，如何让它的高度铺满屏幕剩余的空间？

回复内容：

不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？
不需要考虑低版本浏览器。

<code>
    
    
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        html,body         {width: 100%;height: 100%;}
        </style>
    
    
        <div style="height:100px">top</div>
        <div>middle</div>
        <div style="height:100px">bottom</div>
    
    
</code>

比如上面的middle，如何让它的高度铺满屏幕剩余的空间？

使用flex布局

<code>



    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
    }
    body {
        display: -webkit-flex;
        -webkit-flex-direction:column;
    }
    .flex1 {
        -webkit-flex: 1;
    }
    </style>



    <div style="height:100px">top</div>
    <div class="flex1">middle</div>
    <div style="height:100px">bottom</div>



</code>

使用table-row布局

<code>



    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    body {
       display: table;
    }
    .one {
        background: red;
    }
    .two {
        background: blue;
    }
    .three {
        background: green;
    }
    div {
        display: table-row;
    }
    </style>



    <div style="height:100px" class="one">top</div>
    <div class="two">middle</div>
    <div style="height:100px" class="three">bottom</div>



</code>