Question

为了解释我的问题，我做了以下代码：

http://jsfiddle.net/Ridermansb/REYZ6/

问题是。

div“页脚”应始终粘贴在屏幕底部（底部：0）。
但是如果div“内容”增长到创建滚动条的点，div“footer”应该在div“content”的正下方

一个人永远不应该相互重叠！

正如您在示例中所看到的，如果屏幕太小，“＃footer”将覆盖“#content”。这不可能发生！

谢谢！

Answer 1

根据我对你的小提琴的理解，只是 css，你想做什么是不可能的。也就是说，我在jquery中提出了一行你可以用来做我想你想做的事情：

$('#spacer').height($("#footer > div").height());

Demo

非jquery代码：

document.getElementById('spacer').style.height = document.getElementById('footer-inner').offsetHeight + "px";

Demo

然而，两个片段都需要对HTML结构稍作修改;他们都添加了一个spacer div，用于将内容从footer div下推出。但是第二个片段也要求你给你的页脚内部div一个id。

Answer 2

.container {
    position: relative;
}
.container .glued_bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
}

Answer 3

解决页脚布局的几种方法

使用百分比高度可以在某些情况下起作用

html, body { height:100%;}
#header {height:10%; }
#content { height:80%; }
#footer { height:10%;}

感谢它可能不适合您网站的内容，但值得一看仅作为css选项。

另一种是使用背景css元素，将页面颜色设为页脚颜色（让我们说绿色）

并将标题和内容元素设置为白色，例如白色

body { background-color:green; }
#header { background-color:white; }
#content { background-color:white; }

...可能与

一起玩的非Javascript想法

是的，固定或绝对定位会导致重叠而不添加一些Javascript来监视并重新定位更改。

希望有所帮助

Answer 4

通过this sticky footer tutorial。以下代码应该是创建粘性页脚所需的全部内容。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

在你的情况下，除了html和body上的100％高度之外，你几乎没有丢失所有上述css。我已经更新了你的jsfiddle。

Live DEMO

Answer 5

在具有左下角和左边的元素上使用CSS的position:fixed;。 e.g：

#footer {
position: fixed;
bottom: 0px;
left: 0px;
}

在底部修复div。（不使用javascript）

5 个答案:

在底部修复div。 （不使用javascript）

5 个答案:

在底部修复div。（不使用javascript）