Question

http://swimclub-theme.myshopify.com/search?q=asfsf

我正在使用following theme。正如您所看到的，当您搜索不可用的内容时，页面不是100％高，“页脚”部分会围绕页面中心悬空。有没有办法让容器总是100％高？我尝试添加min-height等，但似乎并不想让步。

有没有人知道为什么会这样？

谢谢！

Answer 1

不要弄乱内容高度。您正在寻找的是“粘性页脚”。以下是最佳实践仅限CSS的解决方案：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 400px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 260px;
    width: 100%;
}

来源：http://mystrd.at/modern-clean-css-sticky-footer/

Answer 2

正如你所说，这不会奏效。你在css中唯一能做的就是设置 position: absolute; http://jsfiddle.net/52vpw2wg/1/

但你可以用JavaScript或jQuery来做。像这样http://jsfiddle.net/52vpw2wg/2/

Answer 3

你可以使html和body的最小高度为100％。如果页脚被放到底部，它就可以去那里。

html, body {
min-height:100%;
}

尽管没有内容，使容器100％高度

3 个答案: