div在調整大小時垂直居中並保留了特定邊距

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/

如果你有很少的修改知道它應該工作，你就必須做數學題，並把正確的數字，運氣好的話