Question

我知道有重复的类似问题，但是我只是无法保持页脚停留在底部，并且我尝试了多个建议的修复程序。请告诉我如何将页脚移到页面底部。它与身体有关吗？谁发布解决方案，您能否说出那是不正确的？

<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>

   <div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
  <a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Services</a>
</li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
<li class="nav-item">
  <a class="nav-link" href="#">Contact</a>
</li>
   </div>
<body id="body">
       <div>
           <img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo"> 
       </div>
</body>
    <footer>
        <a class="service-link" href="#">Privacy Policy</a>
        <a class="service-link" href="#">Terms of Service</a>
          </footer>
</html>

    @charset "utf-8";
/* CSS Document */

html {
    background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
    background-repeat: no-repeat;
  background-size: cover;
}   
#body {

}
#header, 
li .nav-link {
    font-family: "Copperplate Gothic";
    color: #000000
}
#logo {  display: block;
  margin-left: 26%;
  margin-right: auto;
  margin-top: 12%;
  width: 50%;}

#navbarSupportedContent {
    color: black;
    font-family: "Copperplate Gothic";
    font-size: .99em;
    padding: 1em;
}

#navbarSupportedContent li {
    list-style-type: none;
    display: inline-block;
}
div #navbarSupportedContent {
    width: 100%;
}
.navbar {
    text-align: center;
    position: relative;
    font-size: 150%;
    margin-left: 3%;
}
.navbar-nav {
    text-align: center;
    position: relative;
    font-size: 150%;
}

footer .service-link {
    color: #000000;
}

footer {
    text-align: center;
        clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}

Answer 1

HTML：

<body>
  <div wrap>1
    <div wrap>1.1</div>
  </div>
  <div>2</div>
  <div wrap>3</div>
  <div wrap>4</div>
  <div wrap>5</div>
</body>

CSS：

<body>
  <div class="wrapper">
    <div wrap>1
      <div wrap>1.1</div>
      <!–– ignored ––>.
    </div>
  </div>
  <div>2</div>
  <div class="wrapper">
    <div wrap>3</div>
    <div wrap>4</div>
    <div wrap>5</div>
  </div>
</body>

Answer 2

您当前拥有的是一个页脚元素，它作为页面流中的另一个普通元素而存在（FYI，您上面有一个多余的position:relative），因此它结尾的位置是结尾处的内容（即您的图片）。

如果您希望将页脚撞到视口底部，无论内容长度或滚动位置如何，该页脚始终可见，那么您可以在页脚上使用position: fixed，如crodev的答案所示。但是，这占用了屏幕空间，并且是出于有意和充分的理由使用的（例如在某种形式的用户体验中使用一些操作栏）。

但是，在常规页面情况下，当内容短并且希望页脚出现在视口的底部时，最好使用如下所示的flex布局（它也具有各种优点）：

Codepen

body {
  height: 100vh;
  margin: 0;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#header {
  background-color: red;
  min-height: 100px;
}

#content {
  flex: 1;
  background-color: green;
  
  /* to test a longer page */
  /* min-height: 3000px; */
}

#footer {
  background-color: blue;
  min-height: 100px;
}

.section {
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="container">
  <div id="header" class="section">
    header
  </div>
  
  <div id="content" class="section">
    content
  </div>
  
  <div id="footer" class="section">
    footer
  </div>
</div>

页脚出现在屏幕中间

2 个答案: