时间戳

首页 > 解决方案 > 当我全屏显示时，页脚不会自动向下移动，并且我的文章部分和网站页脚之间有很大的空白

html - 当我全屏显示时，页脚不会自动向下移动，并且我的文章部分和网站页脚之间有很大的空白

问题描述

我不知道如何正确表达它，但是当我扩展我网站的文章部分时，我的网站页脚不会自动向下移动。或者，当我添加内容时，网站并没有变大。

页脚有点与内容重叠，我希望在我的内容和页脚之间留一个小空白。下面用图片更好地解释 我包括了一些网站的图片以便更好地解释：

前： 在此处输入图像描述

后：
在此处输入图像描述

我遇到的另一个问题是，每当我进入全屏模式时，我的页面内容和页脚之间都会有一个很大的空白。

也许这可以通过解决上述问题来解决。我在这里也包括了一些图片：

普通画面： 在此处输入图像描述

在全屏中： 在此处输入图像描述

我不知道问题出在哪里，所以我包含了我的大部分代码，这可能是一个愚蠢的问题，但我已经尝试了很多，但我无法让它按我想要的方式工作。

body {
  height: 100%;
  margin: 0px;
  color: #f2f2f2;
  background-color: white;
  font-family: tahoma;
  text-align: center;
  line-height: 15px;
}

.stickynav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.stickynav li {
  float: left;
}

.stickynav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.stickynav li a:hover {
  background-color: #000;
}

.stickynavactive {
  background-color: #000;
}

.posts {
  display: flex;
  background: #000;
  margin: 10px;
}

.posts div {
  border: 1px white solid;
  padding: 10px;
}

.box-1 {
  flex: 1;
}

.box-2 {
  flex: 1;
}

.box-3 {
  flex: 1;
}

header {
  background-color: #000000;
  margin: 0px 0px;
}

h1 {
  margin: 20px;
}

h2 {
  font-size: 13px;
  text-decoration: none;
}

hr {
  border: 10px 0px #454444 solid;
}

footer {
  background-color: #000000;
  border-color: #000000;
  position: absolute;
  line-height: 10px;
  width: 100%;
  height: 75px;
  bottom: 0;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}
<body>
  <div class="stickynav">
    <section>
      <ul>
        <li><a class="stickynavactive" href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </section>
  </div>


  <div class="posts">
    <div class="box-1">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
    <div class="box-2">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
    <div class="box-3">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
  </div>


  <div class="footer">
    <footer>
      <a>Footer</a>
    </footer>
  </div>
</body>

标签： htmlcss

解决方案

最大的问题是你position: absolute在footer. position: absolute将元素从正常的文档流中取出 - 这就是为什么当有一堆内容时您会看到内容被页脚重叠的原因。

这也是您在fullscreen. 您基本上将页脚设置为始终位于屏幕底部。

问题：

您将无法解决所有问题并将其保留footer在底部。根据您认为要解决的更大问题，您必须选择一个：

  1. 删除页脚上的position: absolute，因此它并不总是在底部。
  2. 在您之后保留大量空白posts并将页脚保持在底部。您可以通过将底部填充添加到body等于页脚的高度并添加position: relative到主体来做到这一点，因此该footer位置是相对于主体元素的。

这是第一个选项：

body {
  height: 100%;
  margin: 0px;
  color: #f2f2f2;
  background-color: white;
  font-family: tahoma;
  text-align: center;
  line-height: 15px;
}

.stickynav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.stickynav li {
  float: left;
}

.stickynav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.stickynav li a:hover {
  background-color: #000;
}

.stickynavactive {
  background-color: #000;
}

.posts {
  display: flex;
  background: #000;
  margin: 10px;
}

.posts div {
  border: 1px white solid;
  padding: 10px;
}

.box-1 {
  flex: 1;
}

.box-2 {
  flex: 1;
}

.box-3 {
  flex: 1;
}

header {
  background-color: #000000;
  margin: 0px 0px;
}

h1 {
  margin: 20px;
}

h2 {
  font-size: 13px;
  text-decoration: none;
}

hr {
  border: 10px 0px #454444 solid;
}

footer {
  background-color: #000000;
  border-color: #000000;
  line-height: 10px;
  width: 100%;
  height: 75px;
  bottom: 0;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}
<body>
  <div class="stickynav">
    <section>
      <ul>
        <li><a class="stickynavactive" href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </section>
  </div>


  <div class="posts">
    <div class="box-1">
      <h3>Title</h3>
      <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
      
    </div>
    <div class="box-2">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
    <div class="box-3">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
  </div>


  <div class="footer">
    <footer>
      <a>Footer</a>
    </footer>
  </div>
</body>

这是第二个选项：

/* ADD THIS SO BODY IS ALWAYS 100% */
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
  color: #f2f2f2;
  background-color: white;
  font-family: tahoma;
  text-align: center;
  line-height: 15px;
  /* ADD PADDING, POSITION and BOX-SIZING so the footer can position correctly */
  padding-bottom: 100px;
  position: relative;
  box-sizing: border-box;
}

.stickynav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.stickynav li {
  float: left;
}

.stickynav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.stickynav li a:hover {
  background-color: #000;
}

.stickynavactive {
  background-color: #000;
}

.posts {
  display: flex;
  background: #000;
  margin: 10px;
}

.posts div {
  border: 1px white solid;
  padding: 10px;
}

.box-1 {
  flex: 1;
}

.box-2 {
  flex: 1;
}

.box-3 {
  flex: 1;
}

header {
  background-color: #000000;
  margin: 0px 0px;
}

h1 {
  margin: 20px;
}

h2 {
  font-size: 13px;
  text-decoration: none;
}

hr {
  border: 10px 0px #454444 solid;
}

footer {
  background-color: #000000;
  border-color: #000000;
  line-height: 10px;
  width: 100%;
  height: 75px;
  bottom: 0;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
  position: absolute;
}
<body>
  <div class="stickynav">
    <section>
      <ul>
        <li><a class="stickynavactive" href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </section>
  </div>


  <div class="posts">
    <div class="box-1">
      <h3>Title</h3>
      <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>
      <p>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</p>

    </div>
    <div class="box-2">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
    <div class="box-3">
      <h3>Title</h3>
      <p>Lorem Ipsum</p>
    </div>
  </div>


  <div class="footer">
    <footer>
      <a>Footer</a>
    </footer>
  </div>
</body>

推荐阅读