calc计算百分比高度溢出出现滚动条。

Question

这个代码height: calc(100% - 60px);计算出高度，但是内容溢出后不可以滚动，除非把100%换成一个准确的px高度，但是为了实现不同终端使用我就要这样子计算，求帮助弄出可以滚动？

Answer 1

 <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            * {
                box-sizing: border-box;
            }
            .top {
                height: 60px;
                border: 1px solid #ccc;
            }
            .wrap {
                height: calc(100% - 60px);
            }
            .box {
                height: 1000px;
                border: 1px solid #ddd;
            }
        </style>
        
        <div class="top"></div>
        <div class="wrap">
            <div class="box"></div>
        </div>

亲测，是有滚动条的啊