身高在Javascript中沒有呈現預期

所以在JavaScript中，我試圖讓我的網站的一個部分是100％ - 「導航」身高在Javascript中沒有呈現預期

你可以認爲它像2名可見對象只，第一真的很大，第二個是底部的小。

CSS聲明如下：

#mainHeader{ 
    height: 100vh; 
} 

#nav{ 
    height 90px; 
}

，我已經在javascript/jQuery的創建此

這個執行後

<body onload = "function()"> </body> 

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("nav").outerHeight(true); 
$("#mainHeader").css("height",mainHeaderHeight + "px");

它看起來像什麼： Extra Webpage content peeks higher What I want it to look like

來源

2014-12-31 skarchmit

什麼是你所面臨的問題？ –

你可以保存自己的jQuery的麻煩，使用CSS3選擇calc（因爲你使用的是相當「現代」 vh反正）：

#mainHeader { 
    height: calc(100vh - 90px); 
}

來源

2014-12-31 00:13:49

這是行不通的，但我想稍後可能會自動更改它，如果我決定將90px更改爲更小或更大。自動總是好的：D – skarchmit

你選擇nav元素，而不是你需要匹配的id的#nav您CSS。

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("#nav").outerHeight(true); 
 
$("#mainHeader").css("height",mainHeaderHeight + "px");

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#mainHeader{ 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav{ 
 
    height 90px; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="mainHeader">main</div> 
 
<div id="nav">nav</div>

來源

2014-12-31 00:17:44

是的，我確切地說，我認爲它會暗示：D * {padding：0;保證金：0} – skarchmit

身高在Javascript中沒有呈現預期

回答

相關問題