CSS overlaying and positioning issues

Question

I'm new to web development and currently working with plain CSS and vanilla javascript. There's a problem I'm facing. Below is an explanation of what the problem is:

Attached in the Code Snippet is a test webpage I was trying to build having a 3D Navbar. The issue started with absolute positioning of the div with 'main' class. Whenever the height of the window is reduced, as in when opening the inspector, the content of the page gets cut off at top gradually as the height is decreased. Moreover, on opening the menu when the height is decreased again, the div with 'main' shrinks with decrease in height which I don't want to happen. I want it to remain same as the height of the device.

Note: Please view the snippet in full screen. The text 'Selenophile' was supposed to be at the center but the dummy text moved it upward and that's a problem as well.

It's like, I want to implement this design in longer webpages but I am unable to do so and mentioned above are the problems I could point out. Hope it makes sense when you see the code.

Being a beginner, you may find some unnecessary lines of code in the process; I'm sorry for that and hope you bear with me. Thanks in advance for all your help!

 document.querySelector('.bar').addEventListener('click', () => { document.querySelector('.bar').classList.toggle('active'); document.querySelector('.main').classList.toggle('active'); document.querySelector('.container').classList.toggle('active'); });

 @import url('http://fonts.cdnfonts.com/css/vivaldi'); :root { --time: .3s; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-30deg, rgba(10, 20, 30, .6), rgba(0, 0, 5, 1)); } .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 60px; display: flex; z-index: 2; } .nav p { color: #fff; flex-basis: 90%; line-height: 40px; font-size: 1.3rem; font-weight: 600; } .nav .bar { flex-basis: 10%; display: flex; justify-content: center; align-items: center; } .nav .bar .ham { width: max(30%, 30px); height: 2px; background: #fff; position: relative; } .nav .bar .ham::before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(-10px); } .nav .bar .ham::after { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(10px); } .main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://es-static.z-dn.net/files/d52/3135fb500f7b226fdedbc7cc03d320f5.jpg) center/cover; transform-origin: left; transition: all var(--time); display: flex; justify-content: center; align-items: center; flex-flow: column; color: #fff; perspective: 1000px; transform-style: preserve-3d; z-index: 1; } .main h2 { color: lightcyan; font-size: 7rem; filter: brightness(230%); font-family: "Vivaldi"; } .main a { background: oldlace; width: 300px; padding: 20px; border-radius: 80px; letter-spacing: .15em; font-weight: 600; text-decoration: none; text-align: center; color: orangered; font-size: 1.5rem; margin-top: 20px; } .main p { font-size: 1.2rem; padding: 100px; text-align: center; } .main p span { font-size: 1.7rem; padding: 50px; } .main.active { transform: perspective(1000px) scale(.6) rotateY(10deg) translateZ(100px) translateX(300px); box-shadow: 1px 0px 40px 10px rgba(255, 255, 255, .2); } .container nav { position: absolute; top: 150px; right: 40px; width: 200px; } .container nav ul { list-style: none; } .container nav ul li a { display: block; text-decoration: none; padding: 20px 0; color: #fff; font-family: sans-serif; text-transform: uppercase; letter-spacing: .1em; transform: translateY(10px); } .navButtons { margin-right: 10px; }

 <!DOCTYPE html> <html lang='en'> <head> <title>Test</title> <meta name='viewport' content='width=device-width'> </head> <body> <nav class='nav'> <p>BrandNAME</p> <div class='bar'> <div class='ham'></div> </div> </nav> <div class='main'> <h2>Selenophile</h2> <a href='#'>Sign up</a> <p> <span>ABOUT US</span><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada ligula ac erat lobortis, id rutrum libero posuere. Donec luctus auctor nisi, vitae efficitur libero aliquam nec. Praesent finibus arcu sed nisi pharetra, vel consequat ligula tincidunt. Donec in purus tempor, consectetur lorem non, suscipit mi. Quisque viverra nibh eu hendrerit bibendum. Duis mollis in est id luctus. Donec vehicula et tellus ut mattis. Etiam porttitor orci vitae pharetra semper. Vivamus rhoncus at tellus non lobortis. Praesent interdum lobortis sapien, vel facilisis nulla pellentesque nec. Donec facilisis mauris libero, at auctor elit sollicitudin sit amet. Etiam volutpat elit sed accumsan malesuada. Ut magna erat, dapibus nec urna aliquet, maximus fringilla velit.<br><br> Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi commodo dui ac sem vehicula, et semper libero imperdiet. In purus sapien, fermentum vitae magna ac, malesuada luctus odio. In faucibus turpis et dapibus lacinia. Nam in nunc nunc. Praesent in mi mauris. Phasellus consectetur elit sit amet dolor maximus, non ultrices lorem imperdiet. Integer suscipit pellentesque erat, vitae euismod turpis. Vestibulum tempor fermentum dolor, ut pulvinar sem pulvinar sed. Phasellus viverra elit quam, in consectetur tortor sollicitudin nec. Integer convallis turpis faucibus tortor vehicula ultrices. Nulla commodo pretium nisi, in vulputate tellus malesuada nec. </p> </div> <div class='container'> <nav> <ul> <li><a href='#' class='navButtons'>Home</a></li> <li><a href='#' class='navButtons'>Profile</a></li> <li><a href='#' class='navButtons'>About</a></li> <li><a href='#' class='navButtons'>Services</a></li> <li><a href='#' class='navButtons'>FAQ</a></li> </ul> </nav> </div> </body> </html>

Answer 1

This is happening because the .main is using positon: absolute; . You're giving it a height: 100% , but that works a little differently with position: absolute; .

If you switch .main to use position: relative; and set min-height: 100vh; that would get it to take the full height of the viewport and it won't go off the page like it was before.

There are a few other styling issues, but there that should fix the main issue.

 const bar = document.querySelector('.bar') const main = document.querySelector('.main'); const container = document.querySelector('.container'); function handleClick() { if (bar.classList.contains('active')) { bar.classList.remove('active'); main.classList.remove('active'); container.classList.remove('active'); setTimeout(function(){ main.classList.remove('crop'); main.style.height = 'auto'; }, 300); } else { const wHeight = window.innerHeight; main.style.height = `${wHeight}px`; main.classList.add('crop'); bar.classList.add('active'); main.classList.add('active'); container.classList.add('active'); } } bar.addEventListener('click', handleClick);

 @import url('http://fonts.cdnfonts.com/css/vivaldi'); :root { --time: .3s; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-30deg, rgba(10, 20, 30, .6), rgba(0, 0, 5, 1)); } .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 60px; display: flex; z-index: 2; } .nav p { color: #fff; flex-basis: 90%; line-height: 40px; font-size: 1.3rem; font-weight: 600; } .nav .bar { flex-basis: 10%; display: flex; justify-content: center; align-items: center; } .nav .bar .ham { width: max(30%, 30px); height: 2px; background: #fff; position: relative; } .nav .bar .ham::before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(-10px); } .nav .bar .ham::after { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; transform: translateY(10px); } .main { position: relative; min-height: 100vh; width: 100%; height: 100%; background: url(https://es-static.z-dn.net/files/d52/3135fb500f7b226fdedbc7cc03d320f5.jpg) center/cover; transform-origin: left; transition: all var(--time); display: flex; align-items: center; flex-flow: column; color: #fff; perspective: 1000px; transform-style: preserve-3d; z-index: 1; } .crop{ height: 100%; max-height: 100vh; overflow:hidden; } .main h2 { color: lightcyan; font-size: 7rem; filter: brightness(230%); font-family: "Vivaldi"; } .main a { background: oldlace; width: 300px; padding: 20px; border-radius: 80px; letter-spacing: .15em; font-weight: 600; text-decoration: none; text-align: center; color: orangered; font-size: 1.5rem; margin-top: 20px; } .main p { font-size: 1.2rem; padding: 100px; text-align: center; } .main p span { font-size: 1.7rem; padding: 50px; } .main.active { transform: perspective(1000px) scale(.6) rotateY(10deg) translateZ(100px) translateX(300px); box-shadow: 1px 0px 40px 10px rgba(255, 255, 255, .2); } .container nav { position: absolute; top: 150px; right: 40px; width: 200px; } .container nav ul { list-style: none; } .container nav ul li a { display: block; text-decoration: none; padding: 20px 0; color: #fff; font-family: sans-serif; text-transform: uppercase; letter-spacing: .1em; transform: translateY(10px); } .navButtons { margin-right: 10px; }

 <!DOCTYPE html> <html lang='en'> <head> <title>Test</title> <meta name='viewport' content='width=device-width'> </head> <body> <nav class='nav'> <p>BrandNAME</p> <div class='bar'> <div class='ham'></div> </div> </nav> <div class='main'> <h2>Selenophile</h2> <a href='#'>Sign up</a> <p> <span>ABOUT US</span><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada ligula ac erat lobortis, id rutrum libero posuere. Donec luctus auctor nisi, vitae efficitur libero aliquam nec. Praesent finibus arcu sed nisi pharetra, vel consequat ligula tincidunt. Donec in purus tempor, consectetur lorem non, suscipit mi. Quisque viverra nibh eu hendrerit bibendum. Duis mollis in est id luctus. Donec vehicula et tellus ut mattis. Etiam porttitor orci vitae pharetra semper. Vivamus rhoncus at tellus non lobortis. Praesent interdum lobortis sapien, vel facilisis nulla pellentesque nec. Donec facilisis mauris libero, at auctor elit sollicitudin sit amet. Etiam volutpat elit sed accumsan malesuada. Ut magna erat, dapibus nec urna aliquet, maximus fringilla velit.<br><br> Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi commodo dui ac sem vehicula, et semper libero imperdiet. In purus sapien, fermentum vitae magna ac, malesuada luctus odio. In faucibus turpis et dapibus lacinia. Nam in nunc nunc. Praesent in mi mauris. Phasellus consectetur elit sit amet dolor maximus, non ultrices lorem imperdiet. Integer suscipit pellentesque erat, vitae euismod turpis. Vestibulum tempor fermentum dolor, ut pulvinar sem pulvinar sed. Phasellus viverra elit quam, in consectetur tortor sollicitudin nec. Integer convallis turpis faucibus tortor vehicula ultrices. Nulla commodo pretium nisi, in vulputate tellus malesuada nec. </p> </div> <div class='container'> <nav> <ul> <li><a href='#' class='navButtons'>Home</a></li> <li><a href='#' class='navButtons'>Profile</a></li> <li><a href='#' class='navButtons'>About</a></li> <li><a href='#' class='navButtons'>Services</a></li> <li><a href='#' class='navButtons'>FAQ</a></li> </ul> </nav> </div> </body> </html>

Edit: Updated the script and a few styles. Needed to remove the justify-content: center; on .main because it was causing the content to go off the screen when cropped. I would make .main a wrapper and put other flex items inside of it so that it can crop the page correctly.

CSS overlaying and positioning issues

Question

1 answers

solution1
0 ACCPTED 2021-07-23 16:53:14

CSS overlaying and positioning issues

Question

1 answers

solution1 0 ACCPTED 2021-07-23 16:53:14

solution1
0 ACCPTED 2021-07-23 16:53:14