本文介绍了粘滞页脚下浮动内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面,其中的内容浮动在中心,所以在任何浏览器的大小,内容div将总是在中间smack砰。

I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.

现在,我已经在页面上添加了一个粘性页脚,但是当浏览器窗口小于预期时,页脚显示在浮动内容的前面。

Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.

我不知道如何清除浮动的工作,或绝对定位如何影响相对定位的速度。我知道,一旦我使页脚是绝对的,它变得独立于所有其他的div,这是自然不是我想要的,但这是我遇到的地方。

I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.

我的问题是,如何使粘滞页脚显示在页面底部,但如果浏览器屏幕的高度较小,则保持在浮动内容之下。

My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.

以下是我目前的程式码范例:

Here is an example of my current code: http://jsfiddle.net/ySru9/1/

我从这里获取了粘性页脚代码:和此处

I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css

对不起,如果这是对SO的另一个问题的重复,但我已经拖网,不能精确找到任何相同。

I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?

推荐答案

如果你使页脚位于绝对的位置身体,但确保身体有一些最小高度大于你的黄色容器,这可以工作:

If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:

这篇关于粘滞页脚下浮动内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 03:02