Javascript 高度单位为'；我不能如期呈现_Javascript_Jquery_Html_Css

Javascript 高度单位为'；我不能如期呈现

javascript jquery html css

Javascript 高度单位为'；我不能如期呈现,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，在javascript中，我试图使我的网站的一部分成为100%-“nav” 你可以把它想象成只有两个可见的物体，第一个非常大，第二个底部很小 CSS声明如下： #mainHeader{ height: 100vh; } #nav{ height 90px; } 我已经在javascript/jquery中创建了它这是基于 <body onload = "function()"> </body> var mainHeaderHeight

因此，在javascript中，我试图使我的网站的一部分成为100%-“nav”

你可以把它想象成只有两个可见的物体，第一个非常大，第二个底部很小

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");


var mainHeaderHeight=$（“#mainHeader”）.outerHeight（真）-$（“导航”）.outerHeight（真）；
$（“#mainHeader”）.css（“高度”，mainHeaderHeight+“px”）；

它看起来像什么：

您可以省去jQuery的麻烦，使用CSS3选项（因为您使用的是非常“现代”的

vh

）：

您选择的是

nav

元素，而不是

#nav

您需要匹配CSS中的

id

var mainHeaderHeight=$（“#mainHeader”）.outerHeight（true）-$（“#nav”）.outerHeight（true）；
$（“#mainHeader”）.css（“高度”，mainHeaderHeight+“px”）
html，正文{
保证金：0；
填充：0；
}
#总管{
高度：100vh；
保证金：0；
填充：0；
}
#导航{
高度90px；
保证金：0；
填充：0；
}

主要的
nav您面临的问题是什么？是的，我确实有这个问题，我想这会暗示：D*{padding:0；margin:0}这确实有效，但如果我决定将90px更改为更小或更大的值，我可能稍后会自动更改它。自动总是好的：D
#mainHeader {
    height: calc(100vh - 90px);
}