如圖:期待效果:如何在不給主體內(nèi)容添加滾動條的情況下,滾動瀏覽器滾動條,主體內(nèi)容顯示完成并且不出現(xiàn)空白區(qū)域?代碼如下:<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title></title>? ? <style>? ? ? ? body{? ? ? ? ? ? margin: 0;? ? ? ? ? ? padding: 0;? ? ? ? ? ? color: #fff;? ? ? ? }? ? ? ? .container{? ? ? ? ? ? width: 800px;? ? ? ? ? ? height: 1000px;? ? ? ? ? ? background: #4c77f2;? ? ? ? ? ? margin: 0 auto;? ? ? ? ? ? padding-top: 40px;? ? ? ? ? ? text-align: center;padding-bottom:100px;? ? ? ? }? ? ? ? .header{? ? ? ? ? ? width:800px;? ? ? ? ? ? position: fixed;? ? ? ? ? ? height: 40px;? ? ? ? ? ? background: #414141;? ? ? ? ? ? text-align: center;? ? ? ? ? ? font-size: 16px;? ? ? ? ? ? line-height: 40px;left:50%;transform:translateX(-50%);? ? ? ? }.footer-div{? ? ? ? ? ? height: 100px;line-height:100px;width: 800px;position:fixed;bottom:0;}? ? ? ? .footer{? ? ? ? ? ? height:inherit;width:inherit;? ? ? ? ? ? background: #333;? ? ? ? ? ? text-align: center;? ? ? ? ? ? font-size: 16px;position:inherit;left:50%;transform:translateX(-50%);? ? ? ? }? ? </style></head><body><div><div class="header">這是頁面頭部</div><div class="container">這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容這是頁面內(nèi)容</div><footer class="footer-div"><div class="footer">這是頁面底部</div></footer></div>? ??</body></html>
滾動瀏覽器的滾動條到最低端,主體內(nèi)容不能完全顯示完,并出現(xiàn)空白部分。頂端和低端都是用fixed布局的
努力奔跑的自己
2018-08-27 00:18:43