将页脚冲洗至页面底部，Twitter引导程序

CSS

JinJin

2020-03-23

我通常熟悉使用CSS刷新页脚的技术。

但是我很难让这种方法适用于Twitter引导程序，这很可能是因为Twitter引导程序本质上是响应式的。使用Twitter引导程序，我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。

第2887篇《将页脚冲洗至页面底部，Twitter引导程序》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共25个回答

樱Tony 2020.03.23

的HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

的CSS

html, body {
  height: 100%;
}

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

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

null 2020.03.23

这是引导程序的执行方式：

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面源代码，您就可以看到。不要忘记<div id="wrap">顶部。

泡芙Green阳光 2020.03.23

这是使用Flexbox的最新版本Bootstrap（在撰写本文时为4.3）的解决方案。

HTML：

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

还有一个代码笔示例：https ://codepen.io/tillytoby/pen/QPdomR

达蒙 2020.03.23

使用下面的类将其推到页面的最后一行，并使其居中。如果您在Rails HAML页面上使用ruby，则可以使用以下代码。 %footer.card.text-center

请不要忘记使用twitter bootstrapp

小胖 2020.03.23

另一种可能的解决方案，仅使用媒体查询

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

Pro神乐阿飞 2020.03.23

在这里，您会发现HAML（http://haml.info）中的方法，导航栏位于页面顶部，页脚位于页面底部：

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

猴子村村 2020.03.23

把事情简单化。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过向脚添加margin-bottom等效于页脚高度的方式来抵消页脚的高度body。

蛋蛋猿 2020.03.23

这是使用css3的示例：

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

小提琴

神无 2020.03.23

看来height:100%“链”已被打破div#main。尝试添加height:100%它，可能会使您更接近目标。

Stafan 2020.03.23

按照Bootstrap 4.3示例，如果您像我一样失去理智，这实际上是这样的：

页脚div的所有父母都需要拥有height: 100%（h-100班级）
页脚的直接父级必须具有display: flex（d-flexclass）
页脚需要有margin-top: auto（mt-auto类）

问题在于，在现代的前端框架中，我们经常围绕这些元素使用其他包装。

例如，在我的Angular中，我是从单独的应用程序根目录，主应用程序组件和页脚组件组成视图的-所有这些都将其自定义元素添加到DOM中。

因此，要使其工作，我必须向这些包装器元素中添加类：一个附加类h-100，d-flex向下移动mt-auto一个级别，然后从页脚向上移动一个级别（因此，实际上不再在页脚类上，而是在我的<app-footer>自定义上元件）。

番长樱梅 2020.03.23

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度与wrap元素的底部凹痕的大小匹配。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

伽罗 2020.03.23

经过测试Bootstrap 3.6.6。

的HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

的CSS

.footer {
  bottom: 0;
  position: absolute;
}

宝儿 2020.03.23

唯一为我工作的人：

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

ProSam 2020.03.23

使用navbar组件并添加.navbar-fixed-bottom类：

<div class="navbar navbar-fixed-bottom"></div>

加体

  { padding-bottom: 70px; }

伽罗十三 2020.03.23

最简单的技术可能是navbar-static-bottom结合使用Bootstrap 和将主容器div设置为height: 100vh（新CSS3 视图端口百分比）。这会将页脚冲洗到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

DavaidTony宝儿 2020.03.23

要处理宽度约束布局，请使用以下命令，以免出现圆角，并使导航栏与应用程序的侧面齐平

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

那么您可以使用CSS覆盖引导类，以调整高度，字体和颜色

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

小小 2020.03.23

使用Bootstrap 4内置的flex实用程序！这是我主要使用Bootstrap 4实用程序想到的。

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex 使主div成为flex容器
.flex-column 在主div上将弹性项目排列在列中
min-height: 100vh 到主div（具有style属性或在CSS中）以垂直填充视口
.flex-grow-1 容器元素上的，以使主要内容容器占用视口高度中保留的所有空间。

西里神奇 2020.03.23

这是使用Twitter Bootstrap和新的navbar-fixed-bottom类进行操作的正确方法：（您不知道我花了多长时间来寻找它）

CSS：

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML：

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

飞云伽罗伽罗 2020.03.23

在最新版本的bootstrap 4.3中，可以使用.fixed-bottomclass 完成此操作。

<div class="fixed-bottom"></div>

这是我在页脚中使用它的方法：

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

您可以在此处的职位文档中找到更多信息。

Tom凯 2020.03.23

这非常适合我。

将此类navbar-fixed-bottom添加到您的页脚中。

<div class="footer navbar-fixed-bottom">

我这样使用它：

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

并在整个宽度上设置为最低。

编辑：这会将页脚设置为始终可见，这是您需要考虑的事项。

null 2020.03.23

好吧，我发现了navbar-inner和 navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

看起来不错，对我有用

在此处输入图片说明

参见示例 Fiddle

小卤蛋 2020.03.23

您需要包装.container-fluiddiv才能使粘性页脚正常工作，并且在.wrapper类上还缺少一些属性。尝试这个：

padding-top:70px从body标签中删除，然后将其包含在您的标签中.container-fluid，如下所示：

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们之所以必须这样做，是因为body向下推动以容纳导航栏最终会使页脚向视口的上方（再往前移70像素），因此我们得到了一个滚动条。我们.container-fluid改用div 可以获得更好的结果。

接下来，我们必须删除div .wrapper之外的类，.container-fluid并#main用它包装div，如下所示：

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

当然，您的页脚必须位于.wrapperdiv之外，因此请从.wrapper div中将其删除，然后将其放置在外部，如下所示：

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

完成这些操作后，请.wrapper使用负边距将页脚正确地拉近班级，如下所示：

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

那应该行得通，尽管您可能需要修改一些其他内容才能在调整屏幕大小时正常工作，例如重置.wrapper类的高度，如下所示：

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

樱 2020.03.23

现在，它包含在Bootstrap 2.2.1中。

Bootstrap 3.x

使用导航栏组件并添加.navbar-fixed-bottom类：

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

不要忘了添加body { padding-bottom: 70px; }，否则页面内容可能会被覆盖。

文件：http：//getbootstrap.com/components/#navbar-fixed-bottom

宝儿理查德 2020.03.23

更简单的官方示例：http : //getbootstrap.com/examples/sticky-footer-navbar/

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

A神无 2020.03.23

发现这里的代码片段非常适合引导

HTML：

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android