html - CSS:具有全高内容 DIV 的粘性页脚

Question

我正在尝试合并 bootstrap sticky footer与 full-height content DIVs .看来这个问题已经在 CSS Tricks site 上得到了回答。但 jurotek 提出的解决方案似乎已被删除。

我以前asked this question我以为提供了解决方案，但仔细检查后发现它不起作用。

问题是全尺寸 DIV 要求所有祖先的高度为 100%，但粘性页脚意味着您不能在 HTML 元素上具有此属性。因此发生冲突。

我将研究使用视口(viewport)高度在 CSS 中使用 calc()，看看是否可行。

如果您能提供帮助，我将不胜感激。有什么想法吗？

Answer 1

如果希望页脚随页面内容一起滚动，可以使用flex div:

body {
  height: 100vh;
  width:100%;
  margin:0px;
}

#container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height:100%;
}

#A {
  flex: 0 0 30px;
}

#B {
  flex: 1 1 auto;
}

#C {
  flex: 0 0 30px;
}

<div id="container">
  
<div id=A style="background-color:gold;">header</div>

<div id=B style="background-color:tomato;">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>

<div id=C style="background-color:gold;">footer</div>

</div>