页面元素溢出高度

Question

我正在处理固定的 width 和 height 页面。

我正在使用悬停效果，但我遇到了问题，因为页面的 overflow-y 未固定为 100vh (100%)。

为什么会发生这种情况，我该如何解决这个问题？

img {
  max-width: 100%;
}
.top {
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
}
.first {
  width: 50%;
  height: 100vh;
  background-image: url(https://pixabay.com/get/9b249f09fa8c19807d92/1437036240/nature-213364_1280.jpg?direct);
  background-size: cover;
  float: left;
  transition: background-position 0.35s ease;
}
.second {
  width: 50%;
  height: 50vh;
  float: left;
  background-image: url(https://pixabay.com/get/5412212433a79f218468/1437036270/pyrenees-351266_1280.jpg?direct);
  background-size: cover;
}
.third {
  width: 50%;
  height: 50vh;
  float: left;
  background-image: url(https://pixabay.com/get/9480bb6112148d6fe514/1437036286/meadow-196567_1280.jpg?direct);
  background-size: cover;
}
.first:hover {
  background-position: 0 -60px;
  transition: background-position 0.35s ease;
}
/* EFFECT  1*/

div.effect-zoe figcaption {
  bottom: 0;
  position: absolute;
  width: 47%;
  padding: 1.5%;
  background: #fff;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
div.effect-zoe h2 {
  float: right;
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: 500;
}
div.effect-zoe p.icon-links a {
  float: right;
  color: #3c4a50;
  font-size: 1.4em;
}
div.effect-zoe:hover p.icon-links a:hover,
div.effect-zoe:hover p.icon-links a:focus {
  color: #252d31;
}
div.effect-zoe p.description {
  position: absolute;
  bottom: 8em;
  padding: 2%;
  color: #fff;
  text-transform: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  border: solid 1px #fff;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-backface-visibility: hidden;
  /* Fix for Chrome 37.0.2062.120 (Mac) */
}
div.effect-zoe h2 {
  display: inline-block;
}
div.effect-zoe:hover p.description {
  opacity: 1;
}
div.effect-zoe:hover figcaption,
div.effect-zoe:hover h2,
div.effect-zoe:hover p.icon-links a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
div.effect-zoe:hover h2 {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

<div class="top"></div>
<div class="first effect-zoe">
  <figcaption>
    <h2>VISITA IL SITO</h2>
    <p class="icon-links">
      <a href="#"><span class="icon-heart"></span></a>
      <a href="#"><span class="icon-eye"></span></a>
      <a href="#"><span class="icon-paper-clip"></span></a>
    </p>
    <p class="description"><strong>RIVIERA - HOME</strong><br/>Un luogo da cui partire, un luogo in cui far ritorno..</p>
  </figcaption>
</div>
<div class="second"></div>
<div class="third"></div>

Answer 1

您有几个问题需要解决：

默认情况下 body 已被浏览器应用 margin。通过将 margin: 0; 添加到 body
.first的height需要设置内容溢出不展开。通过将 overflow: hidden; 添加到 .first
figcaption 需要相对于 .first 定位。通过将 position: relative; 添加到 .first
因为 .first 现在是 position: relative; .top 需要修改以确保它位于它上面。通过将 z-index: 1; 添加到 .top
现在 figcaption 相对于 .first 相应地修改 width 以适应。将 width: 47%; 更改为 width: 97%;

body {
  margin: 0;
}
img {
  max-width: 100%;
}
.top {
  z-index: 1;
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
}
.first {
  overflow: hidden;
  position: relative;
  width: 50%;
  height: 100vh;
  background-image: url(https://pixabay.com/get/9b249f09fa8c19807d92/1437036240/nature-213364_1280.jpg?direct);
  background-size: cover;
  float: left;
  transition: background-position 0.35s ease;
}
.second {
  width: 50%;
  height: 50vh;
  float: left;
  background-image: url(https://pixabay.com/get/5412212433a79f218468/1437036270/pyrenees-351266_1280.jpg?direct);
  background-size: cover;
}
.third {
  width: 50%;
  height: 50vh;
  float: left;
  background-image: url(https://pixabay.com/get/9480bb6112148d6fe514/1437036286/meadow-196567_1280.jpg?direct);
  background-size: cover;
}
.first:hover {
  background-position: 0 -60px;
  transition: background-position 0.35s ease;
}
/* EFFECT  1*/

div.effect-zoe figcaption {
  bottom: 0;
  position: absolute;
  width: 97%;
  padding: 1.5%;
  background: #fff;
  color: #3c4a50;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
div.effect-zoe h2 {
  float: right;
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: 500;
}
div.effect-zoe p.icon-links a {
  float: right;
  color: #3c4a50;
  font-size: 1.4em;
}
div.effect-zoe:hover p.icon-links a:hover,
div.effect-zoe:hover p.icon-links a:focus {
  color: #252d31;
}
div.effect-zoe p.description {
  position: absolute;
  bottom: 8em;
  padding: 2%;
  color: #fff;
  text-transform: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  border: solid 1px #fff;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-backface-visibility: hidden;
  /* Fix for Chrome 37.0.2062.120 (Mac) */
}
div.effect-zoe h2 {
  display: inline-block;
}
div.effect-zoe:hover p.description {
  opacity: 1;
}
div.effect-zoe:hover figcaption,
div.effect-zoe:hover h2,
div.effect-zoe:hover p.icon-links a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
div.effect-zoe:hover h2 {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

<div class="top"></div>
<div class="first effect-zoe">
  <figcaption>
    <h2>VISITA IL SITO</h2>
    <p class="icon-links">
      <a href="#"><span class="icon-heart"></span></a>
      <a href="#"><span class="icon-eye"></span></a>
      <a href="#"><span class="icon-paper-clip"></span></a>
    </p>
    <p class="description"><strong>RIVIERA - HOME</strong>
      <br/>Un luogo da cui partire, un luogo in cui far ritorno..
    </p>
  </figcaption>
</div>
<div class="second"></div>
<div class="third"></div>

页面元素溢出高度

Element overflowing height of the page

html

css

overflow

hover