页脚出现在屏幕中间

debugcn 发表于 Dev

迈克尔·戴维森

我知道有类似问题的重复，但我无法让我的页脚留在底部，我已经尝试了多个建议的修复。请教我如何将页脚移动到页面底部。跟身体有关系吗？谁发布了一个解决方案，你能说这是不正确的吗？

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

火星与背部

您目前拥有的是一个页脚元素，它仅作为页面流中的另一个普通元素存在（仅供参考，您有多余position:relative的内容），因此它结束的位置是它上面的内容结束的地方（即您的图像）。

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

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

代码笔

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。