javascript - 与视差内容作斗争

Question

我正在我的个人网站上工作，所有内容(大部分)都在索引页面上。前 3 个部分运行良好，但最后一个部分似乎已损坏。我认为这可能是因为 flex ，但我不确定。

谢谢大家的帮助:)

此外，我知道我的图像可能在笔中弄乱了，我知道。我要返回并进行媒体查询以修复它们

CODEPEN

HTML

  <h2>Explore my Work</h2>
  <div class='imageContainer'>
    <a href="#"><img src="#"></a>
    <a href="#"><img src="#"></a>



  </div>

</div>

<div class="contact">
  <h3>Hello World</h3>
</div>

CSS

.myWork {
  position: absolute;
  text-align: center;

  background:linear-gradient(#333,#5a5454);
  height:100%;
  width:100%;



}
.myWork h2 {
  position:relative;
  margin-top: 4%;
  font-size: 4em;
  color:white;
  text-shadow: -4px 3px 12px rgba(0, 0, 0, 1);
}
.myWork img {
  width: 500px;
  height:500px;

  border:4px solid black;
  border-radius: 5px;

}
.myWork img:hover{
  box-shadow:   0 4px 4px rgba(0, 0, 0, .1),
                0 8px 8px rgba(0, 0, 0, .1),
                0 16px 16px rgba(0, 0, 0, .1),
                0 32px 32px rgba(0, 0, 0, .15),
                0 64px 64px rgba(0, 0, 0, .15);
  transition: box-shadow .3s ease-out;
}
.imageContainer {
  display:flex;
  -webkit-flex-flow:row wrap;
  align-items: center;
  padding:0;
  margin:0;
  justify-content: space-around;

}
.contact {
  height:75%;
  background-color:green;
  position: absolute;
  bottom:0;

}

Answer 1

不确定您是否需要将 .myWork 定位为绝对位置，如果不需要，通过删除 position: absolute 我认为它会解决您的问题。

你的问题出现在 height: 100% of .myWork combined with position: absolute.