CSS：具有全高内容DIV的粘性页脚 [英] CSS: Sticky footer with full-height content DIVs

问题描述

我正在尝试将引导程序粘滞页脚与全高内容DIV 。看起来这个问题已经在 CSS Tricks网站，但jurotek提出的解决方案似乎已被删除。

我之前，我认为提供了一个解决方案，但是经过仔细观察后发现，它不起作用。

问题是全尺寸的DIV需要所有祖先的高度：100％，但粘滞的页脚意味着你不能拥有这个属性在HTML元素上。因此冲突。

我将在CSS中使用calc（）使用视口的高度进行调查，看看是否有效。

如果您能提供帮助，我将非常感激。任何想法的人？

解决方案

如果您希望页脚与页面内容一起滚动，您可以使用flex divs： p>

  body {height：100vh;宽度：100％; margin：0px;}＃container {display：-webkit-flex;显示：flex; -webkit-flex-wrap：wrap; flex-wrap：wrap; -webkit-flex-direction：column; flex-direction：列;最小高度：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>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br>文字<峰; br> ; text< br> text< br> text< br>< / div>< div id = C style =background-color：gold;> footer< / div>< / div>

I am trying to combine bootstrap sticky footer with full-height content DIVs. It appears that this question has been answered on the CSS Tricks site but the solution proposed by jurotek appears to have been deleted.

I previously asked this question and I thought there was a solution provided but it turns out on closer inspection that it doesn't work.

The problem is that full-sized DIVs require a height:100% on all ancestors, but the sticky footer means you can't have this attribute on the HTML element. Thus a conflict.

I am going to investigate using a calc() in the CSS using the height of the viewport, see if that works.

I would really appreciate it if you could help. Any ideas anyone?

解决方案

If you want the footer to scroll together with the page content, you can use flex divs:

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>

这篇关于CSS：具有全高内容DIV的粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！