html - 移动设备屏幕尺寸上的页脚

Question

这让我发疯，我已经尝试了我所知道的所有可能的解决方案以及我在 SO 上找到的其他解决方案，但我一定错过了一些东西。

我有一个网站，它的页脚位于绝对位置，在桌面上效果很好，但是当我在移动屏幕尺寸上查看时，页脚会跳转到各种位置，具体取决于我如何为其设置 CSS 位置，请参阅下面的代码

* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, Serif, sans-serif;
}
/*background:rgb(255,224,240);*/

#logo {
  width: 45%;
  margin: auto;
}
#wrapper {
  width: 60%;
  margin: auto;
  height: 100%;
}
#nav {
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 28%;
}
footer {
  width: 60%;
  height: 5%;
  position: absolute;
  bottom: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
li {
  display: inline-block;
}
li a {
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  font-family: sans-serif;
  color: rgb(0, 0, 0);
}
li:hover a {
  border-bottom: 4px solid rgb(255, 65, 180);
}
p {
  text-align: center;
}
.important {
  text-align: left;
  margin-top: 2%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
h2 {
  text-align: center;
}
#left_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  margin-right: 3%;
  border: 2px solid rgb(255, 65, 180);
}
#right_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  border: 2px solid rgb(255, 65, 180);
}
#centre_block {
  width: 100%;
  float: left;
  margin-top: 6%;
  border: 2px solid rgb(255, 65, 180);
}
@media screen and (max-width: 1024px) {
  #wrapper {
    width: 99%;
    min-height: 100%;
  }
  #body {
    padding-bottom: 5%;
  }
  #nav {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 28%;
  }
  footer {
    width: 100%;
    height: 5%;
    bottom: 0;
  }
}

<div id="wrapper">
  <!--60% width-->
  <header>
    <div id="logo" class="logo">
      <h1>This is where the logo will be</h1>
    </div>
    <!--50% centred-->
    <div id="nav">
      <!--50% width centred-->
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">News</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </div>
  </header>
  <div id="left_page" class="columns">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div id="right_page" class="columns">
    <h2>Sed efficitur consequat massa ut sagittis.</h2>
  </div>
  <div id="centre_block">
    <h1>Sed dapibus dapibus lectus in auctor.</h1>
  </div>
  <footer>
    <h3>This will be the footer</h3>
    <p>This is where &copy; Copyright information goes</p>
  </footer>

</div>

我一整天都在为这个问题烦恼，有人可以帮忙吗？

谢谢

Answer 1

问题

1.) 页脚高度 = 屏幕尺寸的 5%。文本内容溢出了。

2.) 正文和 HTML 没有声明高度。

3.) #wrapper 中的内容是 float 的，并且后面没有清除元素。

4.) 您的页脚将始终可见，它将与内容重叠。

---

修复

1.) 从页脚中删除height:5%;。

2.) 添加这行 CSS:html, body {height:100%;}

3.) 在#wrapper后添加伪元素:

#wrapper:after {
  content:"";
  display:block;
  clear:both;
}

3.) 如果 html 和 body 始终为窗口高度的 100%，那么您可以设置 #wrapper 到 min-height:100% 和 position:relative。这将作为绝对定位元素的包罗万象。它们将出现在包装器的底部，该底部要么是屏幕的底部，要么是更下方，具体取决于内容长度。我们还需要在包装器的底部添加一些填充以防止重叠，并确保将 box-sizing 设置为 border-box 以便整体高度仍然是100%。 (也可以使用 calc())

---

经过更改的截屏视频

工作代码

我在下面的代码片段中修复了所有这些问题，并用红色背景突出显示了页脚，以便您可以看到。

* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, Serif, sans-serif;
}
/*background:rgb(255,224,240);*/

html, body {
  height:100%;
}
#logo {
  width: 45%;
  margin: auto;
}
#wrapper {
  width: 60%;
  margin: auto;
  min-height: 100%;
  position:relative;
  padding-bottom:60px;
  box-sizing:border-box;
}
#wrapper:after {
  clear:both;
  display:block;
  content:"";
}
#nav {
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 28%;
}
footer {
  width: 60%;
  background-color:red;
  position: absolute;
  bottom: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
li {
  display: inline-block;
}
li a {
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  font-family: sans-serif;
  color: rgb(0, 0, 0);
}
li:hover a {
  border-bottom: 4px solid rgb(255, 65, 180);
}
p {
  text-align: center;
}
.important {
  text-align: left;
  margin-top: 2%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
h2 {
  text-align: center;
}
#left_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  margin-right: 3%;
  border: 2px solid rgb(255, 65, 180);
}
#right_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  border: 2px solid rgb(255, 65, 180);
}
#centre_block {
  width: 100%;
  float: left;
  margin-top: 6%;
  border: 2px solid rgb(255, 65, 180);
}
@media screen and (max-width: 1024px) {
  #wrapper {
    width: 99%;
    min-height: 100%;
  }
  #body {
    padding-bottom: 5%;
  }
  #nav {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 28%;
  }
  footer {
    width: 100%;
    bottom: 0;
  }
}

<div id="wrapper">
  <!--60% width-->
  <header>
    <div id="logo" class="logo">
      <h1>This is where the logo will be</h1>
    </div>
    <!--50% centred-->
    <div id="nav">
      <!--50% width centred-->
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">News</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </div>
  </header>
  <div id="left_page" class="columns">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div id="right_page" class="columns">
    <h2>Sed efficitur consequat massa ut sagittis.</h2>
  </div>
  <div id="centre_block">
    <h1>Sed dapibus dapibus lectus in auctor.</h1>
  </div>
  <footer>
    <h3>This will be the footer</h3>
    <p>This is where &copy; Copyright information goes</p>
  </footer>

</div>