html – How can I properly use the calc() function in css3 top only calculate a top height of a div?

Sorry if this question isn’t very well worded, it has been a struggle for me to figure out how to properly do what I am asking and as such have a lot of information I would like to provide.

For the past few hours, I have been messing with a left side navigation bar that uses only html and css to function. I have gotten most of the features I would like to see in it working, except for when the view height is shrunk below approximately 500px the whole nav bar begins to overflow on top of itself. Everything has been contained in divs and assigned its own section that it stays in, but because I used translate on the navlink-container id in my css to make sure it stays centered beneath the image there is the aforementioned overflow.

With this in mind I decided to use calc to try and fix this issue by simply inputting height: calc(100% - 125px); on the navlink-container which works. My only issue is that it seems to take the 250px and divide it on the top and bottom of the div that I’m applying it to. Is there some way to make sure that it only applies this height fix to the top using calc or am I looking at this from the wrong angle. Below is the html and css in question. The calc function is applied at the bottom of the css file.

Since this issue persists on both the desktop and mobile view I plan to apply the overflow fix outside of the media query to improve responsiveness at any view. Obviously, such a small height is not optimal and probably wouldn’t be utilized but I would still like to ensure that it is useable at an viewport that is theoretically possible. It is also worth noting that the #navlink-container block in the desktop media query moves the whole div upwards and actually makes the issue occur well before the 500px mark. Without this block is where the issue was first noted.

Any help would be greatly appreciated as I am still fairly new to web development and trying to learn more involved tasks with css. Thank you!

Image showcasing the issue. It first shows the solution I made with calc and then what it looked like prior.

:root {
  --background: #1d1d1d;
  --headerback: #333333;
}

body {
  background-color: var(--background);
}


/*-----------------------------------------------------------*/


/*                         Nav Styles                        */


/*-----------------------------------------------------------*/


/* Remove any browser default styles */

nav img,
nav h1,
nav h2,
nav h3,
nav p,
nav li,
nav ul {
  margin: 0;
  padding: 0;
}


/* Sets header to top of page, sets color and aligns logo */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Place nav to center in mobile view */

nav {
  display: none;
  text-align: center;
  background-color: var(--headerback);
  width: 100%;
  height: 100%;
}


/* Set case, and space out list elements */

nav li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.5em;
  border-top: 1px solid #404040;
  padding-top: 1em;
  padding-bottom: 1em;
}

nav li:last-child {
  border-bottom: 1px solid #404040;
}

#page-logo {
  width: 100%;
  height: 125px;
  background-color: #000;
}

#page-logo img {
  width: 200px;
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#navlink-container {
  margin: 0;
  width: 100%;
  position: absolute;
  top: 60%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#navlink-container>ul {
  list-style-type: none;
  vertical-align: middle;
}


/* Set link and visited styles for nav links*/

nav a,
nav a:visited {
  text-decoration: none;
  color: #dddddd;
}


/* Set hover and active styles for nav links */

nav a:hover,
nav a:active {
  color: #000;
  /* Transition animation for color change */
  transition: 250ms ease-in-out;
}

.SocialLinkGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  width: 120px;
  padding-top: 32px;
  margin: 0 auto;
}

.SocialLinkGrid img {
  width: 50px;
  height: auto;
}

#one {
  grid-column: 1;
  grid-row: 1;
}

#two {
  grid-column: 2;
  grid-row: 1;
}

#three {
  grid-column: 2;
  grid-row: 2;
}

#four {
  grid-column: 1;
  grid-row: 2;
}


/*-----------------------------------------------------------*/


/*                      Nav Toggle Styles                    */


/*-----------------------------------------------------------*/


/* Check if box is checked, by looking for first preceding sibling of nav */

.ToggleNav:checked~nav {
  display: block;
}


/* Hide checkbox */

.ToggleNav {
  display: none;
}


/* Set position to top left corner of header */

.ToggleNavLabel {
  position: absolute;
  top: 48px;
  left: 0;
  margin-left: 1em;
  height: 40px;
  display: flex;
  align-items: center;
}


/* Set Style for each line of hamburger in menu */

.ToggleNavLabel span,
.ToggleNavLabel:before,
.ToggleNavLabel:after {
  display: block;
  background: white;
  height: 3px;
  width: 1.5em;
  border-radius: 2px;
  position: relative;
}


/* Needed for top and bottom lines to display as a stack */

.ToggleNavLabel:before,
.ToggleNavLabel:after {
  content: "";
  position: absolute;
}


/* Set bottom line position */

.ToggleNavLabel:before {
  bottom: 10px;
}


/* Set top line position */

.ToggleNavLabel:after {
  top: 10px;
}


/*-----------------------------------------------------------*/


/*                    Desktop Media Query                    */


/*-----------------------------------------------------------*/

@media only screen and (min-width: 1024px) {
  .ToggleNavLabel {
    display: none;
  }
  nav {
    display: block;
  }
  header {
    position: fixed;
    background-color: var(--headerback);
    margin: 0;
    top: 0;
    left: 0;
    width: 130px;
    height: 100%;
    text-align: center;
  }
  #page-logo img {
    width: 120px;
    height: auto;
    margin: 0 auto;
  }
  /* By setting to 250px, the div now no longer moves into overflow territory over the image at any viewport when moved outside the media query */
  #navlink-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 250px);
  }
  .SocialLinkGrid {
    grid-gap: 10px;
  }
  .SocialLinkGrid img {
    width: 35px;
    height: auto;
  }
  nav li {
    font-size: 16px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://stackoverflow.com/questions/72299120/css/styles.css">
  <title>Document</title>
</head>

<header>


  <input type="checkbox" class="ToggleNav" id="ToggleNav">
  <nav>
    <div id="page-logo">
      <a href="index.html"><img loading="lazy" src="images/Header3.webp" alt="Webpage Logo"></a>
    </div>
    <div id="navlink-container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Experience</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="SocialLinkGrid">
        <a href="#" id="one" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="images/LinkedInLogo.webp" alt="LinkedIn Logo"></a>
        <a href="#" id="two" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="images/FacebookLogo.webp" alt="Facebook Logo"></a>
        <a href="#" id="three" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="images/InstagramLogo.webp" alt="Instagram Logo"></a>
        <a href="#" id="four" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="images/GitHubLogo.webp" alt="Github Logo"></a>
      </div>
    </div>
  </nav>
  <label for="ToggleNav" class="ToggleNavLabel"><span></span></label>
</header>

<body>

</body>

</html>

Leave a Comment