使用position定位 头部底部固定

    技术2022-07-11  97

    解决fixed定位问题,使用position定位,内容可滑动

    <style type="text/css"> html, body{ padding: 0; margin: 0; height: 100%; } .header{ width: 100%; position: absolute; top: 0; height: 60px; line-height: 60px; } .content{ width: 100%; background: pink; position: absolute; top: 60px; bottom: 60px; overflow: auto; } .footer{ width: 100%; position: absolute; bottom: 0; height: 60px; line-height: 60px; } </style> <body> <div class="main-wrapper"> <div class="header">头部</div> <div class="content"> <p>内容</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> <p>哈哈哈哈哈哈哈哈哈哈</p> </div> <div class="footer">底部</div> </div> </body>
    Processed: 0.010, SQL: 9