在底部与页面的动态Ajax内容变化高度页脚CSS布局布局、高度、页面、动态

2023-09-11 00:58:14 作者:初心

[更新]

我实际上是由前述固定页脚的设计折衷了这个问题了。

I actually compromised on this problem for now by foregoing the fixed footer design.

似乎存在与动态内容移动页脚并适当地调整大小的容器,除非页脚固定在浏览器底部最初没有问题。

It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.

我希望其他人最终将提供一个很好的解决方案,它包括了两全其美。的

我花了一整天试图让页脚下移页面,以适应动态添加的(通过AJAX)的内容。我真的需要一些指针或链接,因为我还没有发现任何帮助。

I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.

基本上是:

我的网站具有一些网页开头只有一个文本框和一个按钮,使得内容区域的总高度是首标区下方只有几英寸。

My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.

我没有任何问题,得到的粘页脚的工作,这样的页脚出现在浏览器窗口的底部,即使是在屏幕上含量很少。

I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.

这是相同的CSS布局工作正常,具有浏览器窗口下方延伸内容的其他网页。

That same css layout works fine for other pages that have content that extends beneath the browser window.

美中不足的是:

的内容已经被渲染,并传递到与初始负荷的浏览器。

The content has to be rendered and passed to the browser with the initial load.

的问题:

这是初始加载后通过AJAX添加到页面上的任何内容正确地描绘下来的页面 - 但页脚保持在其初始位置。

Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.

请告诉我,有一个修复程序这一点。 我不能发布的CSS,直到跟我的老板先检查 - 如果可能的 - 如果需要的话,我会在后面 - 但它的许多粘页脚CSS解决方案,漂浮各地的网络只是一个非常基本的版本。

Please tell me there is a fix for this. I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.

感谢。

推荐答案

这听起来像您的页脚使用显示:固定或类似。试着改变你的页脚的容器:

It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:

bottom: 0;
display: block;
position: absolute;

这将确保它出现在右不管容器内它位于底部的(我假设<身体GT; 标记)。你的问题现在变得确保它出现在的屏幕底部的的,而不是你的文档,它开始被更短的底部。你可以在一对夫妇的方式做到这一点,但也许最简单的办法是在你的AJAX内容容器设置一个最小高度:

That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:

min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */

另一种方法是,因为你使用的是JavaScript库(我假设?)抓取所需的内容,或许你也可以调整AJAX内容容器的高度或更改页脚的CSS一旦已加载内容?

The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?