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;
}