鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ calc計算百分比高度溢出出現(xiàn)滾動條。

calc計算百分比高度溢出出現(xiàn)滾動條。

這個代碼height: calc(100% - 60px);計算出高度，但是內(nèi)容溢出后不可以滾動，除非把100%換成一個準(zhǔn)確的px高度，但是為了實現(xiàn)不同終端使用我就要這樣子計算，求幫助弄出可以滾動？

回答
編輯回答
朕略萌
 <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>

親測，是有滾動條的啊

2017年12月25日 03:12