时间戳

首页 > 解决方案 > 努力在 CSS 中正确溢出

css - 努力在 CSS 中正确溢出

问题描述

出于某种原因，我陷入了这个相当简单的问题。我想要一个可滚动的“网站”（只是一个 looong jpg 截图），通过 iPad 作为我作品集的一部分。目标是在不占用页面大量空间的情况下完整展示访问网站的体验。

出于某种原因，我无法让溢出正常工作。从表面上看，这似乎不是一个难题，但它让我很难过。任何朝着正确方向轻推都会受到赞赏。

    .nest {
     position: relative;
    height: 712px;
    overflow-y: scroll;
    }
    .ipad {
    position: absolute;
    top:0px;
    right:0;
    bottom:auto;
    left:0;
    }
    .container{ 
    height: 940px;
    width: 712px;
    position: absolute;
    top:45px;
    background: red;
    }
    .content { 
     width: 712px;
     overflow: auto;
     }
    <div class="nest">
    <div class="container">
      <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
    </div>
    <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
    </div>

标签： csscss-positionoverflow

解决方案

overflow-y: scroll;从类中删除.nest，并将其添加到.container类中。

.nest {
  position: relative;
  height: 712px;
}

.ipad {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: auto;
  left: 0;
}

.container {
  height: 940px;
  width: 712px;
  position: absolute;
  top: 45px;
  background: red;
  overflow-y: scroll;
}

.content {
  width: 712px;
  overflow: auto;
}
<div class="nest">
  <div class="container">
    <img class="content" src="https://i.ibb.co/bWmxzkv/Screenshot-2021-05-05-AAA-Service-Company-Demolition-Contractors.png">
  </div>
  <img class="ipad" src="https://i.ibb.co/kcRh56j/ipad-frame-copy.png">
</div>

推荐阅读