HTML 引导页脚未按应有的方式响应。它没有粘在底部，也没有像我编程的那样显示 100% 宽度

Posted 2023-03-21

【中文标题】HTML 引导页脚未按应有的方式响应。它没有粘在底部，也没有像我编程的那样显示 100% 宽度

【英文标题】：HTML bootstrap footer is not responding as it should. It is not sticking at the bottom and also not showing 100% width as I have programmed

【发布时间】：2017-10-02 20:36:59

【问题描述】：

我正在制作一个小型 Sinatra 应用程序并使用引导程序进行布局。但这也带来了一些问题。

它没有粘在底部，也没有像我编程的那样显示 100% 的宽度。此外，即使尝试了 text-center 类，页脚的文本也没有得到集中。

下面是我的页脚 html。

<div class="container-fluid">
     <footer id="footer">
       <p class="mx-auto">&copy; 2017 <strong>Coding Tips</strong></p>
     </footer>
</div>

请参阅下面我的 CSS 以获取页脚。

#footer 
  background-color: white;
  color: #111111;
  position: relative;
  z-index: 1
  bottom: 0;
  left: 0;
  width: 100%;
  /*height: 20px;*/
  align-content: center;

有解决这个问题的建议吗？

【问题讨论】：

欢迎来到 ***，您的问题应该包含 Minimal, Complete and Verifiable Example。

见这个粘性页脚的例子，通过引导。 getbootstrap.com/examples/sticky-footer-navbar

这不是 Bootstrap 问题。使用相对定位和bottom: 0; 不会使元素粘在父元素的底部。为什么？相对定位元素相对于它们在文档中的位置移动。这种重新定位是一种视觉技巧，因为元素在文档流中继续占用与相对定位之前相同的空间。仅使用您的代码和引导程序，您的元素就是父元素的 100% 宽度。你一定有别的东西介入。

【参考方案1】：

有一种更简单的方法来创建粘性 Bootstrap 页脚，不需要您自己编写任何样式。 Bootstrap 导航栏组件带有.navbar-fixed-bottom 类，允许您将导航栏固定到屏幕底部。例如，

p 
  text-align: center;
  padding: 10px

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <p>&copy; 2017 <strong>Coding Tips</strong></p>
  </div>
</nav>

这样，您可以获得一个固定到底部的导航栏，使用纯 Bootstrap 充当页脚。

编辑 - 创建随页面扩展的粘性页脚。

前面的示例演示了如何创建一个固定在视口底部的页脚，叠加在页面内容上。如果您正在寻找仅在内容稀疏时固定在屏幕底部的页脚，我们可以使用灵活框。

body 
  margin: 0; /* To ensure the footer takes up the full width of the viewport */


.container 
  display: flex;
  min-height: 100vh;
  flex-direction: column;


.content 
  flex: 1;


footer 
  text-align: center;

<div class="container">
  <div class="content">
    Your content goes here.
  </div>
  <footer>
    <p>&copy; 2017 <strong>Coding Tips</strong></p>
  </footer>
</div>

.content 类自动占用可用空间，迫使页脚位于屏幕底部。由于我们将.container 的最小高度设置为100vh，因此它至少会占据屏幕的整个高度。一旦需要更多空间，页脚就会被进一步向下推。 Flexbox 提供了可能是实现这种效果的最简单、最简洁的方法。

引导导航栏：Components - Bootstrap 由 Flexbox 解决：Sticky Footer - Solved by Flexbox - Cleaner, hack-free CSS

【讨论】：

注意，这不是典型的置顶页脚。通常粘性页脚会随着页面内容展开并放置在它之后。此解决方案将页脚元素放置在视口底部，并保留它们的覆盖内容。

@hungerstar 你在想this这样的东西吗？

是的，这是一种可能的解决方案。还有其他的，但 flexbox 是最干净和最灵活的。

嗨，@natejms 非常感谢您的帮助。它确实使我的文本居中，但仍然没有给背景 100% 的宽度！

@HimaChhag 嗯...查看页脚的任何父元素是否有填充或边距。如果您无法确定是哪一个（而且它不是 body 标签），请使用浏览器的 Inspect Elements 菜单中的“Computed”选项卡。

【参考方案2】：

要使文本居中对齐，请使用

 text-align: center;

根据需要宽度为 100%，并且 将页脚放在底部，你可以给 top: 400px; 请检查给定的链接https://jsfiddle.net/komal10041992/xn8mmg44/3/

【讨论】：

向top 添加一个固定值是一种让页脚粘在页面底部的糟糕且不灵活的方法。