Question

我真的需要一些帮助。

我有这个测试网站：www.sfrpsicologia.com/inicio.html

如您所见，我将绿框置于屏幕中间。问题是，当我调整窗口高度时，此框位于徽标和页脚上方。而我想要的是，总是这个div尊重徽标和页脚的高度。我需要一个顶部和底部的边距，这个盒子永远不会超越。

请帮忙吗？我不太了解javascript。我已经尝试过使用CSS样式，但因为它的位置绝对我无法做到。

非常感谢

Answer 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/

如果你的想法很少修改它应该有用，你只需要做数学并输入正确的数字，祝你好运

div在调整大小时垂直居中，具有特定边距

1 个答案: