身高在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中没有呈现预期

回答

相关问题