页脚位于浏览器底部，但不在内容下方答案

【问题标题】：Footer stays at the bottom of the browser but not under the content页脚位于浏览器底部，但不在内容下方
【发布时间】：2023-03-17 00:40:01
【问题描述】：

因此，我似乎在尝试使页脚正确的两种不同方法中遇到了两个问题。使用position: abslotute; 将使页脚停留在浏览器底部，但不在内容下方。因此，当您打开网页时，您会在底部看到页脚，但是当您向下滚动查看其余内容时，它将保持在找到的位置（与 div 重叠）。所以我尝试了clear: both;，它不能与position: absolute; 的组合一起使用，这使得页脚位于内容下方，但它会保留在那里而不是页面的实际底部。我如何最终整理出这个页脚，即使屏幕尺寸不同并且在内容下方也能将其保持在页面底部？

这是我的 HTML 和 CSS：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: white;
  font-family: arial;
}
nav {
  height: 60px;
  background: #dfd9d3;
}
nav ul {
  padding: 0;
  margin: 0 auto;
}
nav ul li {
  list-style: none;
  font-family: arial;
  font-size: 15px;
}
nav ul li a {
  text-decoration: none;
  float: left;
  display: block;
  padding: 20px 20px;
  color: white;
  font-weight: bold;
  margin: 0 0px;
}
nav ul li a:hover {
  background-color: #d9d1c7;
}
#indexContent {
  width: 100%;
  height: 100%;
}
#Banner {
  width: 100%;
  height: 500px;
  border-bottom: solid 4px orange;
}
#backgroundBanner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#backgroundBanner img {
  width: 100%;
  position: relative;
  top: 40%;
  transform: translateY(-40%);
}
#logoBanner {
  width: 100%;
  height: 498px;
  position: absolute;
  top: 65px;
  text-align: center;
}
#logoBanner img {
  width: 400px;
  height: auto;
  margin-top: 70px;
}
#sloganBanner {
  border-top: solid white 3px;
  border-bottom: solid white 3px;
  position: absolute;
  top: 425px;
  width: 50%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#indexSlogan {
  margin: 0;
  font-size: 25px;
  color: white;
}
#indexBottom {
  width: 100%;
}
#indexTitleB {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
#indexH2Title {
  width: 400px;
  border-bottom: solid black 2px;
  margin: 7px auto;
  padding-bottom: 5px;
  font-size: 25px;
  margin-bottom: 0;
}
#indexLeftB {
  float: left;
  width: 50%;
  text-align: center;
}
#indexRightB {
  float: right;
  width: 50%;
  text-align: center;
}
.indexH2 {
  margin: 0;
  font-size: 22px;
}
indexBImage {
  width: 281px;
  border: solid black 5px;
  border-radius: 100%;
  margin: 0 auto;
}
.indexImage {
  width: 280px;
  height: auto;
}
.container {
  min-height: 100%;
  position: relative;
}
footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  text-align: center;
  width: 100%;
  height: 60px;
  clear: both;
}
.indexContent {
  padding-bottom: 60px;
}

<body>
  <div id="container">
    <nav>
      <div id="logo">
        <a href="index.html">
          <img src="" />
        </a>
      </div>
      <ul>
        <li><a id="active" href="#">Home</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">link</a>
        </li>
        <li><a href="#">link</a>
        </li>
      </ul>
    </nav>

    <div id="indexContent">

      <div id="Banner">
        <div id="backgroundBanner">
          <img src="">
        </div>
        <div id="logoBanner">
          <img src="">
        </div>
        <div id="sloganBanner">
          <h1 id="indexSlogan">Some text text text text text text</h1>
        </div>
      </div>
      <div id="indexBottom">
        <div id="indexTitleB">
          <h2 id="indexH2Title">Some text</h2>
        </div>
        <div id="indexLeftB">
          <div class="indexBTitle">
            <h2 class="indexH2">Some text</h2>
          </div>
          <div class="indexBText">
            <p class="indexP">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
              <br>TextTextTextTextTextTextTextTextText <a href="#">Text</a> TextTextTextTextTextTextTextTextTextText.
              <br>
            </p>
          </div>
          <div class="indexBImage">
            <img src="" class="indexImage">
          </div>
        </div>
        <div id="indexRightB">
          <div class="indexBTitle">
            <h2 class="indexH2">Some Text</h2>
          </div>
          <div class="indexBText">
            <p class="indexP">Some Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextTextText
              <br>Some Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
          </div>
          <div class="indexBImage">
            <img src="" class="indexImage">
          </div>
        </div>
      </div>

    </div>

    <footer>
    </footer>

  </div>
</body>

【问题讨论】：

下面我的回答对你有帮助吗？请让我知道您的反馈。谢谢！
并非如此，我遇到了与最初相同的问题....请查看我发布的解决方案，我找到了我想要的。无论如何感谢您的帮助。

标签： css position footer

【解决方案1】：

经过许多小时和许多网页的搜索，页脚停留在内容和页面的底部而不使用位置：固定；我给你解决方案：http://mystrd.at/modern-clean-css-sticky-footer/ 如果你有溢出的内容，只需在你的容器/包装器 div 中添加一个新的 div：

#footerSpacing { clear: both; height: 80px;

高度将页脚和内容分开。并且清楚：两者都将确保没有任何内容与该 div 重叠。

【讨论】：