强制 Bootstrap 的可变高度页脚到页面或内容的底部，以较低者为准

Question

在我的 bootstrap 页面中，我想强制 <footer>...</footer> 位于页面或内容的底部，以较低者为准。

并且有一个 solution 已经很好用了。但是，这种方法要求我提前知道页脚的高度是多少。

如何实现同样的效果，但页脚高度由其内容决定？

Answer 1

您可以使用flexbox实现粘性页脚。

使用 flex: 1 0 auto; 到 section 将使其成为 flexible，它将获得 flex-container 中所有可用的免费 space。

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.Equivalent to flex: 1 0.

html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  height: 1px; /* Height hack for IE */
}

header,
footer {
  padding: 10px;
  color: white;
  background-color: #000;
}

section {
  flex: 1 0 auto; /* This will make section flexible */
}

<header>Header</header>
<section></section>
<footer>Footer</footer>

强制 Bootstrap 的可变高度页脚到页面或内容的底部，以较低者为准

Force Bootstrap's variable height footer to the bottom of page or content, whichever is lower

html

css

twitter-bootstrap

sticky-footer