jquery - 在Div外部填充顶部导致边距-了解DOM

Question

我是一名编码专业的学生，​​我想我一直在取得长足进步，但是最近我遇到了一个我无法解决的问题。

首先，考虑位于HERE的页面。

这是我为一个项目工作的页面。我发现了一种技巧，可以保留HERE的长宽比，并试图利用它来获得所需的外观。

出乎意料的是，在我的情况下，使用此技巧会导致显示底部的包含div出现不必要的边距。我尝试了各种方法来解决此问题，但无济于事。最后，我只是选择使用jQuery来解决问题。我使用的代码如下：

HTML：

(function($) {
  var thingHeight = $('#mainPic').css("height");
  $('#thing').css("height", thingHeight);
})(jQuery);

#opacity {
  background-color: #c5d8d8;
  position: absolute;
  z-index: 1;
  opacity: 0.4;
  height: 100%;
  width: 100%;
}

#mainPic {
  width: 100%;
  z-index: -1;
  background: url('http://nexteratech.org/wp-content/uploads/2018/10/43146453_314512212434998_6895115624842788864_n.jpg');
  padding-top: 33.3%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

#mainHeaderText {
  z-index: 2;
  position: relative;
  bottom: 250px;
  text-decoration: underline #97ef94;
  color: #00353f;
  font-size: 70px;
  line-height: 70px;
  left: 20px;
}

#headerParagraph {
  z-index: 2;
  position: absolute;
  bottom: 249px;
  left: 20px;
  font-size: 30px;
  color: #003366
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="opacity"></div>

<div id="mainPic">
  <h1 id="mainHeaderText">NETWORKING & ADMINISTRATION SOLUTIONS
  </h1>
  <p id="headerParagraph">Affordable I.T., server, and cloud solutions for any business size.</p>
</div>

这也不会导致任何更改。我经历了一系列的诊断测试和理论，试图找出无法解决的问题。 jQuery运行正常，不是我的主题（Avada），css都正确键入了，等等，但还是没有。最后，我只是继续给#mainPic设置了一个高度值，我希望避免让高度适合移动设备的适应性，瞧！多余的边距消失了。

我想知道为什么？首先是什么引起了页边空白，为什么jquery没有更改它，为什么即使#mainPic的高度为0，它也消失了？

请原谅我的无知和这个问题的长度。感谢您的任何帮助。 :)

Answer 1

用您提供的摘录很难确切地说明原因。您也可以尝试为我们在JSFiddle内重新创建问题，这可能有助于排除是否有任何外部库影响您的网站。

Paul Molluzo的Pesticide for Chrome extension是我喜欢用来调试利润率问题的工具。