Question

我想知道如何分隔页眉，正文和页脚，因此，当您打开页面时，可以看到页眉和正文并滚动以查找页脚。我尝试了边距，但是没有得到想要的结果。这是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;
}

Answer 1

据我了解。您的实际问题是将页脚放在底部。这是如何使页脚位于底部的演示。

我建议对所有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;
  text-align: right;
}

<body>
  <div class= "header">Header</div>
  <div class="Site-content">Content</div>
  <div class= "footer">Footer</div>
</body>

Answer 2

您可以在页脚上使用auto的上边距，但是必须将主体设置为可弯曲。请参阅标有/ *粘性页脚* /

的CSS代码

body {
    width: 100%;
    margin: 0 auto;
    background-image: url(http://placekitten.com/1000/1000);
    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;
}

footer{
   background-color: yellowgreen;
   color: blanchedalmond;
   padding: 20px 20px;
}


/* sticky footer */
html, body{
   height: 100%;
}
body{
   display: flex;
   flex-flow: column;
}
footer{
   margin-top: auto;
}

<header>
   <ul class="navbar">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
   </ul>
</header>

<footer>This is the footer</footer>

如何分隔页眉正文和页脚

2 个答案: