Question

我是一名编码专业的学生，我认为我已经取得了一些很大的进步，但是最近我遇到了一个我无法解决的问题。

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

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

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

HTML：

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

CSS：

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

jQuery：

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

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

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

请原谅我的无知和冗长的问题。感谢您的任何帮助。：）

Answer 1

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

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

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

1 个答案: