鍍金池/ 問(wèn)答/HTML5  Python  HTML/ 頂端和低端都是用fixed布局的,滾動(dòng)瀏覽器的滾動(dòng)條到最低端,主體內(nèi)容不能完全顯

頂端和低端都是用fixed布局的,滾動(dòng)瀏覽器的滾動(dòng)條到最低端,主體內(nèi)容不能完全顯示完,并出現(xiàn)空白部分。

問(wèn)題:頂端和低端都是用fixed布局的,滾動(dòng)瀏覽器的滾動(dòng)條到最低端,主體內(nèi)容不能完全顯示完,并出現(xiàn)空白部分。
代碼:

<!DOCTYPE html>
<html lang="en">
<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">這是頁(yè)面頭部</div>
        <div class="container">
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            
        </div>
        <footer class="footer-div">
            <div class="footer">這是頁(yè)面底部</div>
        </footer>
        
    </div>
    
</body>
</html>

缺陷效果如圖:
圖片描述

期待效果:如何在不給主體內(nèi)容添加滾動(dòng)條的情況下,滾動(dòng)瀏覽器滾動(dòng)條,主體內(nèi)容顯示完成并且不出現(xiàn)空白區(qū)域?

回答
編輯回答
風(fēng)清揚(yáng)

container為什么要設(shè)1000px的高度

2018年9月6日 02:33
編輯回答
殘淚

非常感謝以上的各位提供的思路。
為了兼容內(nèi)容過(guò)少和內(nèi)容過(guò)多,主體內(nèi)容高度能自動(dòng)撐開(kāi),解決方案代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            width: 800px;
            /*height: 1000px;*/
            min-height: calc(100vh - 140px);
            /*min-height:100%;*/
            padding: 40px 0 100px;
            background: #4c77f2;
            margin: 0 auto;
           /* padding-top: 40px;*/
            text-align: left;
            /*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">這是頁(yè)面頭部</div>
        <div class="container">
            123
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容
            這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這是頁(yè)面內(nèi)容這頁(yè)面
        </div>
        <footer class="footer-div">
            <div class="footer">這是頁(yè)面底部</div>
        </footer>
        
    </div>
    
</body>
</html>

有興趣的可以將主體內(nèi)容減少成一行看看效果
@xuliang 給出的評(píng)論下的代碼一樣符合要求

2017年8月29日 08:29
編輯回答
寫(xiě)榮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            color: #fff;
        }

        .container {
            width: 800px;
            min-height: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            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 class="header">這是頁(yè)面頭部</div>
<div class="container">這是頁(yè)面內(nèi)容</div>
<footer class="footer-div">
    <div class="footer">這是頁(yè)面底部</div>
</footer>
</body>
</html>
2018年6月13日 19:22
編輯回答
愛(ài)是癌
.container {
    position:absolute;
    height:calc(100% - 140px);
}
2017年10月20日 06:46