时间戳

首页 > 解决方案 > CSS 覆盖和定位问题

javascript - CSS 覆盖和定位问题

问题描述

我是 Web 开发的新手，目前正在使用纯 CSS 和 vanilla javascript。我面临一个问题。以下是问题所在的解释：

附加在代码片段中的是我尝试构建的具有 3D 导航栏的测试网页。问题始于具有“主”类的 div 的绝对定位。每当窗口的高度降低时，例如在打开检查器时，页面的内容会随着高度的降低逐渐在顶部被截断。此外，当高度再次降低时打开菜单时，带有“main”的 div 会随着高度的降低而缩小，这是我不希望发生的。我希望它保持与设备的高度相同。

注意：请全屏查看片段。文本“Selenophile”本应位于中心，但虚拟文本将其向上移动，这也是一个问题。

就像，我想在更长的网页中实现这个设计，但我做不到，上面提到的是我可以指出的问题。希望当你看到代码时它是有意义的。

作为初学者，您可能会在此过程中发现一些不必要的代码行；我很抱歉，希望你能容忍我。提前感谢您的所有帮助！

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>

标签： javascripthtmlcss

解决方案

发生这种情况是因为.main正在使用positon: absolute;. 你给它一个height: 100%，但它的工作方式与position: absolute;.

如果您切换.main到使用position: relative;并设置min-height: 100vh;，它将使其占据视口的整个高度，并且它不会像以前那样离开页面。

还有一些其他样式问题，但这应该可以解决主要问题。

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>

编辑：更新了脚本和一些样式。需要删除justify-content: center;on，.main因为它会导致内容在裁剪时离开屏幕。我会制作.main一个包装器并将其他弹性项目放入其中，以便它可以正确裁剪页面。

推荐阅读