主页 / 问题 / 1114078
Accepted
DarkRou
Asked:2020-04-22 22:27:12 +0000 UTC2020-04-22 22:27:12 +0000 UTC

如何将块拉伸到窗口的高度？

  • 772

任务是制作5个块，每个块的高度为1个窗口。还没有代码，因为我还没有弄清楚。但底线是：会有一个“欢迎”块，在它之后，还有一个大小为 1 的窗口，依此类推。画面会更清晰。

图片中不同颜色的块，假设为1个窗口大小

例子

html

2 个回答

  1. Best Answer

    要使块高度等于设备窗口高度，请以 vh 为单位指定高度：

    height: 100vh;

    阅读更多：相对单位 vh、vw、vmin、vmax

    • 6

  2. 我可以假设你正在计划这个：

    * {margin: 0; padding: 0; box-sizing: border-box;}

.container {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

section {
  scroll-snap-align: start;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {font-size: 4vw; color: white; font-weight: normal; font-family: sans-serif; color: white;}

section:nth-child(1) {background-color: black;}
section:nth-child(2) {background-color: dimgray;}
section:nth-child(3) {background-color: darkgray;}
section:nth-child(4) {background-color: darkslategray;}
section:nth-child(5) {background-color: slategray;}

/* Иконка */
.mouse {
  opacity: 0.5;
  position: absolute;
  bottom: 30px;
  width: 24px;
  height: 38px;
  left: 50%;
  margin-left: -12px;
  border: 1px solid white;
  border-radius: 15px;
}

.mouse:before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  animation: scroll 1.5s linear 0s infinite normal none;
}

@keyframes scroll {
  0% {transform: translate3d(0, 0px, 0); opacity: 1;}
  35% {transform: translate3d(0, 7px, 0); opacity: 1;}
  50% {transform: translate3d(0, 10px, 0); opacity: 0;}
  80% {transform: translate3d(0, 0, 0); opacity: 0;}
}
    <div class="container">
  <section><h2>Привет. Это секция 1</h2><div class="mouse"></div></section>
  <section><h2>Привет. Это секция 2</h2></section>
  <section><h2>Привет. Это секция 3</h2></section>
  <section><h2>Привет. Это секция 4</h2></section>
  <section><h2>Привет. Это секция 5</h2></section>
</div>

    • 3

相关问题