我想知道如何将页眉、正文和页脚分开，这样当您打开页面时，您可以看到页眉和正文并滚动查看页脚。我尝试了边距，但没有得到我想要的结果。 这是 CSS:
body {
width: 100%;
margin: 0 auto;
background-image: url(imagine2.jpg);
background-size: cover;
background-attachment: fixed;
}
header {
width: 100%;
background-color: yellowgreen;
height: 58px;
margin-bottom: 10px;
}
a {
text-decoration: none;
}
.navbar {
float: right;
}
.navbar li{
display: inline;
}
.navbar li a {
color: blanchedalmond;
padding: 25px 50px;
}
.navbar li a:hover {
color: chartreuse;
background-color: cornsilk;
}
最佳答案
据我了解。您的实际问题是将页脚放在底部。下面是如何将页脚保持在底部的演示。
我建议对所有 HTML 模板使用 CSS 网格。否则很难将所有屏幕尺寸的页脚都放在底部。 话虽如此，请尝试使用 flexbox。
将所有 html 插入 main，flexbox 会将页脚推到页面底部。
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer {
background-color: #049e8c;
height: 50pt;
text-align: right;
bottom: 0;
}<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>如果你想尝试 CSS 网格，你需要做这样的事情。
所有 HTML 内容都进入 Site-content 部分。希望这有帮助:)
/* Stlyes to make the demo easier to see: */
html{
height: 100%;
}
body {
margin: 0;
display: grid;
height: 100%;
grid-template-areas:
"header_section"
"Site-content_section"
"footer_section";
grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header {
grid-area: header_section;
background-color: #FDD;
}
.Site-content {
grid-area: Site-content_section;
background-color: #DFD;
}
.footer {
grid-area: footer_section;
background-color: #049e8c;
}<body>
<div class= "header">Header</div>
<div class="Site-content">Content</div>
<div class= "footer">Footer</div>
</body>关于html - 如何分离页眉正文和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58984110/