我正在尝试合并 bootstrap sticky footer与 full-height content DIVs .看来这个问题已经在 CSS Tricks site 上得到了回答。但 jurotek 提出的解决方案似乎已被删除。
我以前asked this question我以为提供了解决方案,但仔细检查后发现它不起作用。
问题是全尺寸 DIV 要求所有祖先的高度为 100%,但粘性页脚意味着您不能在 HTML 元素上具有此属性。因此发生冲突。
我将研究使用视口(viewport)高度在 CSS 中使用 calc(),看看是否可行。
如果您能提供帮助,我将不胜感激。有什么想法吗?
最佳答案
如果希望页脚随页面内容一起滚动,可以使用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>
关于html - CSS:具有全高内容 DIV 的粘性页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35627806/