使用JS來計算Div高度

我正在使用一些JavaScript來計算頁面的高度，然後在div上設置最小高度。其原因是將頁腳推到頁面底部以查找內容不足的頁面。我的問題是最小高度大約30-40像素大，從而導致滾動條。（注：我沒有使用像各種原因粘頁腳的解決方案和更喜歡這種解決方案。）使用JS來計算Div高度

這裏是我的代碼：

$(function() { 
    var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight()); 
$("#page-content").css("min-height",height+"px"); 
});

HTML

<header class="container"> 
<div id="menu" class="row"> 
    <!-- Content --> 
</div> 
</header> 

<div id="page-content"> 
    <!-- Content --> 
</div> 

<footer> 
    <!-- Content --> 
</footer>

我相信問題在於我的CSS。比如我有一個保證金在標題爲這樣：

#menu{ 
margin: 5px auto 10px; 
}

如果我刪除代碼會降低滾動只是一點點。（我在頁面上設置了其他邊距，因此只更改這個邊界不會成爲解決方案）。

我該如何重寫JS代碼來考慮頭部和其他部分的邊距？

來源

2012-11-15 L84

爲什麼不計算窗口內容不足，然後將頁腳的'position'設置爲fixed/bottom？ – ahren

我有一個類似的問題，但在寬度上，約8px偏移很奇怪。 –

你已經在使用.outerHeight（），它考慮邊距和填充......在一個側面說明中，我會寫這樣的行，像這樣$（「＃page-content」）。css（{「min-height」：height}）; – VIDesignz

由於某些原因，JS不計算邊距。我在頁眉和頁腳中添加了頁邊空白，總計45px。因此，腳本現在看起來像這樣：

$(function() { 
    var height = $(window).height() - ($("header").outerHeight() + 
       $("footer").outerHeight() + 45 ); 
    $("#page-content").css("min-height",height+"px"); 
});

我添加45px，現在腳本功能正常。

來源

2012-11-18 00:38:51 L84

爲什麼不把頁腳手動放在底部？我的意思是，我知道你說你不喜歡，但爲什麼？如果你希望它一直在那裏，做

position:relative; 
bottom:0;

如果你想讓它與頁面的其餘部分滾動（因爲它聽起來像你可能），使用

position:absolute;

代替。這比動態插入虛擬內容以推下頁腳更好。

來源

2012-11-15 03:37:37 Aehmlo

的<header>框的高度不反映兒童#menu的利潤，因爲它們都是正常的方形元素，如果#page-content有利潤，他們會重疊#menu的利潤，在這種情況下，頭部的高度將包括內容高度的一部分，這是沒有意義的。

的問題是崩潰邊緣：http://www.w3.org/TR/css3-box/#collapsing-margins

由於該網頁解釋，你可以告訴瀏覽器沒有崩潰邊緣的幾個方面：

添加display: inline-block;您#menu { }規則（我的第一個建議）
如果你有對齊問題添加overflow: hidden;您header { }（潛在的更好的建議）
使您<header>絕對定位，或浮動它。或者到#menu裏面。

或者，如果你想要去一個黑客，你可以計算手動頭高度：

var header_height = $("header").outerHeight() + 
    parseInt($("header").children().css('margin-top'), 10) + 
    parseInt($("header").children().css('margin-bottom'), 10);

現在我想想，這是有道理的，我認爲CSS規範做正確的事情。

更新時間：http://jsfiddle.net/HzBSz/2/

另見：Outer element margin not equal to inner element margin

來源

2012-11-15 03:42:15 chbrown

也許你看這 http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 可以解決你的問題。

來源

2012-11-15 04:17:40 Stupidfrog

歡迎來到Stack Overflow！雖然這可能在理論上回答這個問題，但最好在這裏包含答案的基本部分，並提供供參考的鏈接。 –

歡迎來到StackOverflow。我們鼓勵您發佈更實質性的答案，而不是簡單的鏈接，特別是在有特定問題的情況下。 – Brad

嘗試.outerHeight（真）爲您的所有元素，而不是.height（）或.outerHeight（）：

$(function() { 
    var height = $(window).outerHeight(true) - ($("header").outerHeight(true) + $("footer").outerHeight(true)); 
$("#page-content").css("min-height",height+"px"); 
});

.height（） - 返回元素的高度不包括填充，邊框和保證金。

.innerHeight（） - 返回元素的高度，包括填充，但不包括邊框和邊距。

.outerHeight（） - 返回包含邊框的div的高度，但不包括邊距。

.outerHeight（true） - 返回包含邊距的div的高度。

來源

2012-11-15 05:32:17 brightboy2004

.outerWidth（true）; //返回寬度+填充+邊框+邊距 – brightboy2004

這是行不通的。它打破了腳本。 – L84

使用JS來計算Div高度

回答

相關問題