Question

下面的代码是在页面底部制作一个粘性页脚（如果内容很少，页脚会粘到页面底部，如果有很多内容，它会粘在页面底部含量）。

我对此代码的问题是当我的页脚内容包装器有很多内容高于内容时。这是因为页脚不会变成其内容的大小并显示其内容本身。我尝试了很多方法，但似乎无法让它发挥作用。

注意：页脚的高度可变，所以我不能使用常量来抵消页脚。

CSS：

body div#site-wrapper {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
}
body div#site-wrapper > * {
    display: table-row;
}
div#site-content-wrapper {
    min-height: 100%;
}
footer {
    position: relative;
    width: 100%;
    height: 100%;
}
footer div#footerContentWrapper {
    overflow: hidden;
    position: absolute;
    left: 0; right: 0; bottom: 0;
}

HTML：

<div id="site-wrapper">
    <div id="site-content-wrapper"> MAIN CONTENT </div>
    <footer><div id="footerContentWrapper" class="background">
         FOOTER CONTENT
    </div></footer>
</div>

这是一个显示问题的小提琴： https://jsfiddle.net/jhkL9bba/

Answer 1

将页脚div＃footerContentWrapper的宽度设置为10vh，例如

footer {
    position: relative;
    width: 100%;
    height: 15vh;
}

，其余85vh作为div＃site-content-wrapper，示例

div#site-content-wrapper {
  position:relative;
    height: 85vh;
    background:#F00;
    border:solid blue;

}

取出css页脚样式

这是一个小提琴https://jsfiddle.net/repzeroworld/vz4cuzpr/

限制：如果用户调整窗口

，则页脚会增加/减少。

Answer 2

我发现下面的CSS有效。它的工作原理是因为我删除了页脚包装器的绝对位置，从而使其与页脚具有相同的高度，从而消除了我的问题，因为它将在底部而不是在内容上正确

clone

粘滞页脚可变高度

2 个答案: