元素溢出页面的高度

时间：2015-07-16 08:10:07

标签： html css hover overflow

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

我正在使用悬停效果，但由于页面的overflow-y未固定为100vh（100％），因此出现问题。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您有一些问题需要解决：

  • 默认情况下，body已由浏览器应用margin。将margin: 0;添加到body
    • 即可将其删除
  • height .first需要设置为在其内容溢出时不展开。通过将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>

相关问题
最新问题