The top and low end are laid out with fixed, scroll the browser's scroll bar to the lowest end, the main content can not be fully displayed, and there is a blank part.

problem: both the top and the low end are laid out with fixed, scroll the browser"s scroll bar to the lowest end, the main content can not be fully displayed, and there is a blank part.
Code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: -sharpfff;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: -sharp4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
            padding-bottom:100px;
        }
        .header{
            width:800px;
            position: fixed;
            height: 40px;
            background: -sharp414141;
            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: -sharp333;
            text-align: center;
            font-size: 16px;
            position:inherit;
            left:50%;
            transform:translateX(-50%);
            
        }
    </style>
</head>
<body>
    <div>
        <div class="header"></div>
        <div class="container">
            
            
        </div>
        <footer class="footer-div">
            <div class="footer"></div>
        </footer>
        
    </div>
    
</body>
</html>

defect effect is shown in figure

expected effect: how to scroll the browser scroll bar without adding a scroll bar to the main content, the main content is displayed and there is no blank area?

Css html5 html
May.03,2021 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            color: -sharpfff;
        }

        .container {
            width: 800px;
            min-height: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: -sharp4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
            padding-bottom: 100px;
        }

        .header {
            width: 800px;
            position: fixed;
            height: 40px;
            background: -sharp414141;
            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: -sharp333;
            text-align: center;
            font-size: 16px;
            position: inherit;
            left: 50%;
            transform: translateX(-50%);

        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="container"></div>
<footer class="footer-div">
    <div class="footer"></div>
</footer>
</body>
</html>

Why should container set the height of 1000px 

.container {
    position:absolute;
    height:calc(100% - 140px);
}

Thank you very much for your ideas.
in order to be compatible with too little content and too much content, the main content can be supported automatically. The solution code is as follows 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: -sharpfff;
        }
        .container{
            width: 800px;
            /*height: 1000px;*/
            min-height: calc(100vh - 140px);
            /*min-height:100%;*/
            padding: 40px 0 100px;
            background: -sharp4c77f2;
            margin: 0 auto;
           /* padding-top: 40px;*/
            text-align: left;
            /*padding-bottom:100px;*/
        }
        .header{
            width:800px;
            position: fixed;
            height: 40px;
            background: -sharp414141;
            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: -sharp333;
            text-align: center;
            font-size: 16px;
            position:inherit;
            left:50%;
            transform:translateX(-50%);
            
        }
    </style>
</head>
<body>
    <div>
        <div class="header"></div>
        <div class="container">
            123
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        </div>
        <footer class="footer-div">
            <div class="footer"></div>
        </footer>
        
    </div>
    
</body>
</html>

if you are interested, you can reduce the main content to one line to see the effect. The code under the comments given by
@ xuliang also meets the requirements

.

you can not use fixed's
`
< html > 

<head>
    <meta charset="utf-8">
    <title></title>
<style>
  *{
    margin:0;
    padding:0;
    border:none;
  }
  .all{
    height:100vh;
  }
  .head{
    height:5vh;
    background: rgb(200,100,100);
    width:100%;

  }
  .footer{
    height:5vh;
    background: rgb(200,100,100);
    width:100%;
    
  }
  .content{
      overflow-y:scroll;
      height:90vh;
  }
  .neirong{
      height:500vh;
  }
</style>
</head>
<body>
<div class="all"><div class="head"></div><div class="content"><div class="neirong"></div></div><div class="footer"></div></div>
</body>

< / html >
`
this is the effect
QQ20200521105027.png

Previous: On the generics of kotlin

Next: Practical Application of Corey (curring)

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu