如何在 Bootstrap 3 中制作粘性页脚？ [复制]答案

【问题标题】：How to make a sticky footer in Bootstrap 3? [duplicate]如何在 Bootstrap 3 中制作粘性页脚？ [复制]
【发布时间】：2015-10-16 22:08:09
【问题描述】：

这是我的主题的现状：

Fiddle。我不想要 fixed 页脚，也不想要带有 position absolute 的粘性页脚，我只想用页脚颜色填充可怕的部分，我认为 display:table-row 可以解决问题，但不要不知道怎么用。谁能帮帮我？

【问题讨论】：

不，你可能想看看 flexbox
你能告诉我怎么做吗？ IE 支持吗？
这是一个非常干净的例子：philipwalton.github.io/solved-by-flexbox/demos/sticky-footer 和这里的支持caniuse.com/#feat=flexbox
stackoverflow.com/questions/42294/…

标签： html css twitter-bootstrap

【解决方案1】：

这就是您要查找的内容：

.footer{
    background-color:#000;
    color:#fff;
    position:absolute;
    bottom:0px;
    min-width:100%;
}

JSFiddle

【讨论】：

【解决方案2】：

我能想到的最简单的解决方案是制作一个内容容器并为其赋予背景颜色，然后将body 颜色设置为与页脚相同，例如：

body {
    background:#0F0;
}
#header {
    background:#F00;
}
#container {
    background:#FFF;
}
#footer {
    background:#0F0;
}

Fiddle

【讨论】：

【解决方案3】：

这是一个简单的 CSS table + table-row 的结构。

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
header {background: pink;}
footer {background: lightgreen;}

<header>header</header>
<main>main</main>
<footer>footer</footer>

如果您希望它获得最大可用高度，请将height:100% 设置为该部分之一。

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
header, main, footer {
    display: table-row;
}
main {
    height: 100%;
}
header {background: pink;}
footer {background: lightgreen;}

<header>header</header>
<main>main</main>
<footer>footer</footer>

【讨论】：

这是个棘手的方法，非常感谢

【解决方案4】：

添加

  position:absolute;
  bottom:0px;

到.footer

和

position: relative;
  padding-bottom: (n)px;

到正文

将 (n) 更改为页脚的高度

body {
  position: relative;
 margin:0;
  padding-bottom: 100px;

  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer{

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height:100px;
width:100%;
  background-color: #efefef;
  text-align: center;

}

<html><body><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<div class="footer">text</div>
</body></html>

【讨论】：