foreword
Many students may encounter such scenarios when using css+html to write pages:
Except for the head and bottom of the page, when the content in the middle part is empty, the page will appear from the bottom to the top, that is, the head and the bottom are glued together.
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<header>
this is header
</header>
<main class="container">
this is container
</main>
<footer>
this is footer
</footer>
</body>
</html>
css
.container {
min-height: calc(100vh - 70px);
background-color: #ff0;
}
footer {
height: 50px;
background-color: #f00;
}
Summarize:
In this way, the syllogism of a website is realized, head, body and tail.
Attach a quote