为了解释我的问题,我做了以下代码:
http://jsfiddle.net/Ridermansb/REYZ6/
问题是。
div“页脚”应始终粘在屏幕底部(底部:0)。
但是如果 div“内容”增长到创建滚动条的地步,那么 div“页脚”应该就在 div“内容”的下方
一个永远不应该相互重叠!
正如您在示例中看到的,如果屏幕太小,“#footer”将覆盖“#content”。这不可能发生!
谢谢!
</p>
为了解释我的问题,我做了以下代码:
http://jsfiddle.net/Ridermansb/REYZ6/
问题是。
div“页脚”应始终粘在屏幕底部(底部:0)。
但是如果 div“内容”增长到创建滚动条的地步,那么 div“页脚”应该就在 div“内容”的下方
一个永远不应该相互重叠!
正如您在示例中看到的,如果屏幕太小,“#footer”将覆盖“#content”。这不可能发生!
谢谢!
</p>
.container {
position: relative;
}
.container .glued_bottom {
position: absolute;
bottom: 0;
height: 20px;
}
根据我对你的小提琴的理解,你想要做的事情是不可能用css做的。也就是说,我在 jquery 中想出了一行,你可以用它来做我认为你想做的事情:
$('#spacer').height($("#footer > div").height());
非jquery代码:
document.getElementById('spacer').style.height = document.getElementById('footer-inner').offsetHeight + "px";
然而,这两个片段都需要对您的 HTML 结构稍作更改;他们都添加了一个spacer
div,该 div 将内容从footer
div 下推出。然而,第二个片段要求您也为页脚的内部 div 提供一个 id。
解决页脚布局的几种方法
在某些情况下使用百分比高度可以工作
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 来保持监视并进行重新定位更改。
希望有一点帮助
通过这个粘性页脚教程。以下代码应该是创建粘性页脚所需的全部内容。
* {
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。
position:fixed;
在底部和左侧设置的元素上使用 CSS 。例如:
#footer {
position: fixed;
bottom: 0px;
left: 0px;
}