Question

我正在尝试将bootstrap sticky footer与full-height content DIVs结合起来。似乎CSS Tricks site已回答了这个问题，但jurotek提出的解决方案似乎已被删除。

我之前asked this question并且我认为已经提供了一个解决方案但是仔细检查后发现它无法正常工作。

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

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

如果你能提供帮助我真的很感激。任何人的想法？

Answer 1

如果你想要你的div额外内容滚动，你可以这样做：

body {
width: 100vw;
height: 100vh;
margin: 0px;
}

#content {
height: calc(100% - 30px);
background: gold; 
overflow-y: auto;
}

#footer {
height:30px;
background: tomato;  
}

<div id=content>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>
</div>
<div id=footer>footer text.</div>

Answer 2

您是否尝试过使用视口高度和视口宽度的新CSS3单位？

通常，当我使用动态内容时，就是......按高度动态，我会遇到这些错误。我可能会建议您使用height: 100vh;或width: 100vw;，看看它是否有帮助。

我没有看到您当前的代码（只有旧帖子中的代码在SO中）所以我无法提供启发式或更好的解决方案。

Answer 3

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS：具有全高内容DIV的粘性页脚

3 个答案: