Позиционирование div относительно фиксированного div с адаптивным содержимым - PullRequest
Новая
       5

Позиционирование div относительно фиксированного div с адаптивным содержимым

0 голосов
/ 13 сентября 2018

У меня есть хитрая проблема, которую я не могу решить.Я относительно новичок в кодировании, поэтому, пожалуйста, потерпите меня, стараясь изо всех сил, чтобы подробно объяснить мою проблему.Кроме того, я уверен, что мой код очень нетрадиционный и, вероятно, неверный!Не стесняйтесь кричать на меня за все, что может быть более эффективным, и я внесу необходимые изменения.Заранее огромное спасибо!

На моем сайте есть фиксированный нижний колонтитул и фиксированный заголовок с адаптивным содержимым внутри.Я хочу, чтобы содержимое в середине моего веб-сайта (div id = "color") было идеально расположено по отношению к моему верхнему и нижнему колонтитулам (у меня установлено поле margin-bottom в верхнем колонтитуле, а margin-top - 10px)выше и ниже "цвет").Это было легко сделать с помощью моего нижнего колонтитула, потому что в нем нет ничего отзывчивого.С учетом полей, отступов и высоты содержимого мой нижний колонтитул составляет точно 37px, поэтому я установил поле margin-bottom для «color» на 37px, и оно работало отлично.Моя проблема с моим заголовком.Он имеет те же 37px контента, что и нижний колонтитул, но также имеет изображение с шириной «calc (100% - 20px)» для устройств, которые находятся в портретной ориентации, и шириной 20% для устройств, которые находятся в альбомной ориентации.ориентации.Из-за этого заголовок увеличивается и уменьшается по высоте в зависимости от разрешения устройства просмотра.Каков наилучший способ вычислить поле для «цветного» элемента div, чтобы оно всегда было справа от моего заголовка (37px + независимо от высоты, получаемой из адаптивного изображения)?

Вот ссылка на мой JSFiddle: https://jsfiddle.net/ujgsrL8b/19/

Мне не удалось вставить изображение в JSFiddle, но я надеюсь, что весь предоставленный код все еще позволит решить эту проблему.Если это поможет, мое изображение будет 2828x596px.

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

Еще раз спасибо, друзья, я очень ценю это! 

<header id="header">
<div id="logo"> <a href="/" class="nonblocklink"><img alt="A logo." 
src="images/logo.png"></a> </div>
<div id="nav">
<ul>
<li id="projects">
PROJECTS
<ul>
<li id="one"> <a href="one/" class="blocklink" 
target="_self">ONE</a> </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">
INFO
<ul>
<li id="instagram">
<a href="https://www.instagram.com/" target="_blank" 
class="blocklink">INSTAGRAM</a>
</li>
<li id="email">
<a href="mailto:mail@mail.com" 
class="blocklink">EMAIL</a>
</li>
</ul>
</li>
</ul>
</div>
</footer>

a.nonblocklink {
text-decoration: none;
color: inherit;
display: inline-block;
}

a.blocklink {
text-decoration: none;
color: inherit;
display: block;
}

#header {
background-color: white;
width: 100%;
position: fixed;
margin: 0px;
padding: 0px;
padding-top: 10px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}

#logo img {
width: calc(100% - 20px);
}

#logo img:hover {
-webkit-filter: invert(100%) !important;
}

#nav {
width: 100%;
background-color: white;
}

#projects {
display: inline-block;
}

#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

#nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}

#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
padding-top: 10px;
left: 0;
right: 0;
}

#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#one:hover {
background-color: black;
color: white;
}

#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}

#footer-nav {
width: 100%;
}

#info {
display: inline-block;
padding-top: 10px;
}

#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}

#footer-nav ul ul {
width: calc(100% - 20px);
list-style-type: none;
font-weight: normal;
display: none;
}

#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}

#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#email:hover {
background-color: black;
color: white;
}

#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}

#instagram:hover {
background-color: black;
color: white;
}

#color {
margin-top: 37px;
margin-bottom: 37px;
padding: 0px;
top: 0;
left: 0;
width: 100%;
align-content: center;
position: absolute;
}

@media screen and (orientation: landscape) {
#logo img {
    width: 20%;
}
#nav ul ul {
    width: 20%;
}
#footer-nav ul ul {
    width: 20%;
}
}

1 Ответ

0 голосов
/ 13 сентября 2018

Поскольку вы используете простой JS, я обновляю свой ответ.

Это сработало на предоставленной вами JSFiddle: 

window.addEventListener('load', function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("color").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);

window.addEventListener('resize', function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("color").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("color").style.paddingBottom = footerHeight + "px";
}, true);

Просто добавьте это в нижней части вашего JS.Надеюсь, это поможет.

...