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

Question

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

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

问题是。

div“页脚”应始终粘在屏幕底部（底部：0）。
但是如果 div“内容”增长到创建滚动条的地步，那么 div“页脚”应该就在 div“内容”的下方

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

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

谢谢！

​</p>

Answer 1

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

Answer 2

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

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

演示

非jquery代码：

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

演示

然而，这两个片段都需要对您的 HTML 结构稍作更改；他们都添加了一个spacerdiv，该 div 将内容从footerdiv 下推出。然而，第二个片段要求您也为页脚的内部 div 提供一个 id。

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

通过这个粘性页脚教程。以下代码应该是创建粘性页脚所需的全部内容。

* {
    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。

现场演示

Answer 5

position:fixed;在底部和左侧设置的元素上使用 CSS 。例如：

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