Home / Questions / 25743
Accepted
Otto
Asked: 2020-10-02 07:04:03 +0800 CST 2020-10-02 07:04:03 +0800 CST

如何创建适合底部的页脚？

  • 772

大多数解决方案都基于创建一个固定的页脚position: fixed。

给出的其他替代方案是绝对位置。

例子

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

但是浮动页脚不是我们喜欢的，当我们有一个浮动菜单和一个height太高端的页脚时，这不是一个更糟糕的解决方案。


但是有一个留在底部的页脚有什么意义。

  • 当内容或信息区域没有按数量分组时，它仅保留在底部。

示例（内容短的区域）。

在此处输入图像描述

从此框架中获取页脚的解决方案：

在此处输入图像描述

现在仅在内容区域的信息很少时才显示页脚。

一种解决方案是让 jQuery 检测高度并应用一个类以将页脚牢固地放在底部。


如何使用jQuery植入解决方案（对于 jquery 编程爱好者）。

或者在不浮动页脚的情况下，css 可以应用哪些其他替代方案？

jquery

2 Answers

  1. Best Answer

    为此，您不需要 JavaScript/jQuery 或 HTML5/CSS3，有一个 CSS 解决方案甚至可以与旧版本的浏览器一起使用。思路如下：

    • 使文档填满页面的整个高度（height:100%为htmland放置body。
    • 将页面的所有内容封装在一个容器中，该容器也占据 100% 的高度并具有相对位置。
    • 页面内容的padding底部将等于或大于页脚的高度
    • 页脚将绝对位于封装所有内容的内容下方。

    代码如下所示：

    html, body {
  margin:0;
  padding:0;
  height:100%;
}

#pagina {
  position: relative;
  min-height: 100%;
}

#contenido {
  padding-bottom:50px; /* este valor debe ser igual o mayor al alto del pie */
}

#pie {
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}
    <div id="pagina">
  <div id="cabecera">LOGO</div>
  <div id="contenido"></div>
  <div id="pie">2016 &copy; Nombre Empresa</div>
</div>

    既然你想要一个 JavaScript/jQuery 的替代品，这里有一个适合你的；虽然我告诉你可能有很多可能性，正如我在评论中提到的那样，上面描述的 CSS 确实没有必要。

    这个想法是做这样的事情：

    • 将不同的元素放在页面上，不管高度或任何东西
    • 使页脚具有绝对位置，但不指定哪一个。
    • 创建一个函数：
      • 计算文档的高度
      • 计算窗口的高度
      • 计算脚/脚的高度
      • 如果文档高度+页脚高度小于窗口高度，则将页脚粘贴在下方
      • 如果没有，请将页脚留在原处。
    • 创建一个处理程序，以便在加载页面和调整窗口大小时调用上一步中创建的函数。

    这是如何完成的示例：

    function ajustarPie() {
  var winH = $(window).height();
  var docH = $("body").height();
  var pieH = $("footer").height();
  
  if (docH + pieH < winH) {
    $("footer").attr("class", "bottom");
    } else {
      $("footer").attr("class", "");
      }
  }

$(document).ready(ajustarPie);
$(window).on("resize", ajustarPie);
    footer {
  position:absolute;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  left:0;
  width:100%;
}

footer.bottom {
  bottom:0;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>LOGO</header>
<main>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
  <p>Párrafo 4</p>
  <p>Párrafo 5</p>
</main>
<footer>
  2016 &copy; Nombre empresa
</footer>

    • 5

  2. 只是它包裹在页面底部（总是停留在底部），但只有在内容区域很短时才可以选择。因为当有大量内容时，页脚没有问题

    你可以通过 flexbox 来实现：

    *,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 1rem;
}

header h1 {
  font-family: 'segoe ui';
  font-weight: 500;
  text-align: center;
}
.content p {
  font-family: 'segoe ui';
}
.content p:first-letter {
  font-size: 20pt;
}
footer {
  background-color: #222;
  padding: .5rem .8rem;
}
footer p {
  color: rgba(255,255,255,9);
  font-family: 'segoe ui';
  text-align: center;
}
    <section class="container">
  <header>
    <h1>Header</h1>
  </header>
  <main class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed provident explicabo corporis ad consequatur possimus at recusandae, minus nostrum a laudantium doloremque voluptates, pariatur officiis deleniti molestiae. Quas, quae, minima!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam consectetur consequatur, natus unde, deserunt sit voluptate a nesciunt vero in inventore quidem! Voluptate, saepe, veritatis laborum mollitia assumenda placeat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, rem, aut. Mollitia quasi, rem vero delectus iusto optio dolorum alias assumenda commodi quod, cum incidunt dolore pariatur ad minus voluptatem.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora laudantium accusamus unde provident possimus rem nemo officiis, quam perferendis, optio repudiandae nulla rerum doloremque culpa, dignissimos veniam aliquid aliquam ratione?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quos hic rerum, ipsum similique nostrum quis cum repellat eum veritatis magnam vero tempore sequi facere alias, laudantium esse. Nihil, impedit.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, at in! Velit placeat incidunt quidem perspiciatis officiis consequuntur! Tempora nihil nam nemo harum quia adipisci aut, omnis, magni totam quae!
    </p>
    
  </main>
  <footer>
    <p>Footer</p>
  </footer>

    尝试取出两个，p以便您可以看到行为。

    • 3