Question

所以在javascript中我试图将我网站的一部分设为100％ - ＆＃34; nav＆＃34;

你可以把它想象成只有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

Answer 1

你可以节省jQuery的麻烦并使用CSS3选项calc（因为你正在使用相当“现代”的vh）：

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

Answer 2

您需要选择一个nav元素，而不是#nav来匹配CSS中的id。

＆＃13;

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

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

#mainHeader{
  height: 100vh;
  margin: 0;
  padding: 0;
}

#nav{
  height 90px;
  margin: 0;
  padding: 0;
}

＆＃13;

<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>

＆＃13;

Javascript中的高度不会按预期呈现

2 个答案: