Question

所以看起来我试图让页脚正确的两种不同的方法有两个问题。使用position: abslotute;会使页脚停留在浏览器的底部，但不会停留在内容之下。因此，当您打开网页时，您会在底部看到页脚，但是当您向下滚动以查看其余内容时，它将保持在找到的位置（与div重叠）。所以我尝试clear: both;使用position: absolute;的组合，这使得页脚不在内容之下，但它会保留在页面的下方，而不是页面的实际底部。我如何最终对这个页脚进行排序，即使屏幕尺寸不同，内容也在页面底部？

这是我的HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

高度将分隔页脚和内容。并且明确：两者都将确保没有重叠div。

页脚停留在浏览器的底部，但不在内容

1 个答案: