0

I really need some help.

I have this test-web: www.sfrpsicologia.com/inicio.html

As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.

Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.

Thank you very much

4

1 回答 1

1

在这种情况下不要使用绝对定位。您正在尝试使用 javascript 解决糟糕的设计问题，这不是一个好习惯。使用粘性页脚方法http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ 并根据该技术过度考虑您的页面结构。

好的，我明白你的意思了。

这样做，但是我不保证它会起作用，因为我无法在您的网站上对其进行测试，但是如果发生任何障碍，您应该对其进行修改以使其正常工作。我使用的是 jQuery，你应该熟悉它。

所以第1步（获取div）<div id=wrapp>并取它的高度

var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();

第2步（设置一些其他变量）

var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;

这些高度是除了您<div id=wrapp>的情况之外的元素，它们可能或多或少。

var footerH = 34;
var headerH = 74;

这个想法是当屏幕上没有空间让所有这些都停止<div id=wrapp>向上时。

第 3 步（所有这些都绑定到窗口调整大小事件）：

jQuery(window).resize(function(){

    winH = jQuery(this).height();
    pos = wrapp.position();    
    if(winH  < h + headerH + footerH  )
        wrapp.css({'top' : pos.top});
    else
        wrapp.css({'top' : '50%'});
});

在调整大小时更新窗口高度，还获取<div id=wrapp>位置对象，如果（根据您放置的所有高度没有更多空间）将top位置固定到当前顶部位置， <div id=wrapp>否则将其放回百分比。

这是一个例子：http: //jsfiddle.net/F7mrf/44/

如果你的想法只需要很少的修改就可以工作，你只需要做数学并输入正确的数字，祝你好运

于 2012-08-15T22:09:49.193 回答