html body 100%

html body 100%

html

    <div class="header">
        
    </div>
    <div class="main">
        
    </div>
    <div class="footer footer--position-bottom">

    </div>

    <script src="index.html"></script>

css

html {
    height:100%;
}
body {
    margin: 0;
    border: 1px solid red;
    height: 100%;
    background: yellow url(https://www.pexels.com/photo/photo-of-aurora-borealis-1581967/) no-repeat center;
    background-size:cover;
}

.header {
    height: 10px;
    border: 1px dotted red;
}
.footer {
    height: 10px;
    background: gray;
}

.footer--position-bottom {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.main {

    height: 10px;
    background:black;
}

position:absolute

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: red url(https://images.pexels.com/photos/386148/pexels-photo-386148.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500) no-repeat center;
    background-size:cover;

}

css3 height:100vh

body {
    height:100vh;
    background: yellow url(https://www.pexels.com/photo/photo-of-aurora-borealis-1581967/) no-repeat center;
    background-size:cover;

}

转载于:https://www.cnblogs.com/rosendolu/p/10076405.html