Заполнение верхней части вызывает маржу за пределами Div - Понимание DOM - PullRequest
Новая
       14

Заполнение верхней части вызывает маржу за пределами Div - Понимание DOM

0 голосов
/ 25 октября 2018

Я студент по программированию и думаю, что добился значительных успехов, но недавно я столкнулся с проблемой, которую просто не могу понять.

Прежде всего, рассмотрим страницу, расположенную ЗДЕСЬ .

Это страница, над которой я работал для одного из моих проектов.Я нашел трюк для сохранения найденного соотношения сторон ЗДЕСЬ и пытался использовать его, чтобы получить желаемый вид.

Неожиданно использование этого трюка в моем случае вызвалонежелательное поле в содержащем 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?

Пожалуйста, простите мое невежество и длину этого вопроса.Спасибо за любую помощь заранее.:)

1 Ответ

0 голосов
/ 25 октября 2018

Трудно сказать точно , почему с предоставленными вами фрагментами.Вы также можете попытаться воссоздать вашу проблему внутри JSFiddle для нас, и это может помочь исключить влияние каких-либо внешних библиотек на ваш сайт.

Инструмент, который я люблю использовать дляпроблемы с отладкой маржи и тому подобное - расширение Pesticide for Chrome от Paul Molluzo

...