1

I have a tricky issue that I cannot seem to beat. I am relatively new to coding so please bear with me as I try my best to thoroughly explain my issue. Also, I'm sure my code is very unconventional and probably incorrect! Feel free to yell at me for anything that can be more efficient and I will make the proper changes. Thank you heaps in advance!

On my website I have a fixed footer and a fixed header with responsive content inside. I want the content in the middle of my website (div id= "color") to be positioned perfectly against my header and my footer (I have the margin-bottom set on my header and margin-top set on my footer to include 10px above and below the "color"). It was easy to accomplish this with my footer because there is nothing responsive in it. Including margin, padding and the content's height, my footer is exactly 37px, so I set the margin-bottom of "color" to 37px and it worked perfectly. My issue is with my header. It has the same 37px of content similar to the footer, but it also has an image with a width of "calc(100% - 20px)" for devices that are in portrait orientation and a width of 20% for devices that are in landscape orientation. Because of this, the header grows and shrinks height-wise depending on the resolution of the viewing device. What is the best way to calculate my "color" div's margin-top to always be right against my header (37px + whatever height comes from the responsive image)?

Here is a link to my JSFiddle: https://jsfiddle.net/ujgsrL8b/19/

I couldn't get the image to embed in the JSFiddle, but I'm hoping all the provided code will still make solving this possible. If it helps, my image is 2828x596px.

Also, I've read a few articles regarding similar issues, but none had any calculated responsive content similar to my issue. I'm hoping this is an easy fix!

Thank you again friends, I appreciate it immensely!

<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%;
}
}
John Smith
  • 127
  • 2
  • 18

1 Answers1

1

As you are using plain JS, I am updating my answer.

This worked on the JSFiddle you provided:

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

Just add this at the bottom of your JS. Hope this helps.

Architect
  • 356
  • 1
  • 5
  • Thank you for the response! I do indeed need the picture to be responsive, so if you could help me with the javascript it would be greatly appreciated! Thanks again man! :) – John Smith Sep 13 '18 at 19:45
  • Hello Architect! I just deleted my comment saying that the JS worked for the footer and not the header because I've noticed it was only working because I still had padding-bottom set to 37px for the footer. When I removed that from id="color", I can't seem to get the JS to work. Here is a JSFiddle of what is happening with the white background colors removed so you can see where the color content is falling. https://jsfiddle.net/c972ebtu/ – John Smith Sep 13 '18 at 23:38
  • Perfect. I cannot thank you enough. Have an amazing rest of your day sir! – John Smith Sep 14 '18 at 12:17
  • No problem. Thank you, take care. – Architect Sep 14 '18 at 12:35