1

为了解释我的问题,我做了以下代码:

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

问题是。

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

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

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

谢谢!

​</p>

4

5 回答 5

1
.container {
    position: relative;
}
.container .glued_bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
}
于 2013-03-20T12:51:16.677 回答
1

根据我对你的小提琴的理解,你想要做的事情是不可能用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。

于 2012-05-24T07:40:07.800 回答
0

解决页脚布局的几种方法

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

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 来保持监视并进行重新定位更改。

希望有一点帮助

于 2012-05-14T22:50:46.980 回答
0

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

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

现场演示

于 2012-05-14T23:17:16.650 回答
-1

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

#footer {
position: fixed;
bottom: 0px;
left: 0px;
}
于 2012-05-14T22:38:47.053 回答