css - 页脚位于浏览器底部，但不在内容下方-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 02:16:14

看来我在尝试使页脚正确的两种不同方法中遇到了两个问题。使用 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>

最佳答案

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

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

高度将分隔页脚和内容。明确:两者都将确保没有任何内容与该 div 重叠。

关于css - 页脚位于浏览器底部，但不在内容下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38876734/

文章推荐： python - 使用输入管道时如何替换 feed_dict？

文章推荐： c - 关于 sigsetjmp 和 siglongjmp 的问题

文章推荐： css - 在 Safari 9.1.2 (11601.7.7) 中悬停时 SVG 过渡失败

文章推荐： c - C中奇怪的内存错误

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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