在 CSS 中努力解决溢出问题

Question

出于某种原因，我陷入了这个相当简单的问题。我想要一个可滚动的“网站”（只是一个 looong 的 jpg 屏幕截图）作为我投资组合的一部分通过 iPad 框起来。目的是在不占用页面大量 space 的情况下完整地展示访问该站点的体验。

出于某种原因，我无法使溢出正常工作。表面上看起来这不是一个难题，但它让我难住了。向正确方向的任何推动表示赞赏。

    .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>

Answer 1

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

.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>

Answer 2

您的主要问题是您的 .ipad 在 .content 的顶部并且鼠标滚动在 .ipad 图像上发挥作用，但您想滚动屏幕截图图像！

    <style>
        .nest {
            position: relative;
            height: 712px;
        }

        .ipad {
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            height: 875px;
            width: 660px;
            left: 26px;
            position: absolute;
            top: 73px;
        }

        .container > div {
            max-height: 100%;
            overflow-y: scroll;
            position: absolute;
        }

        .content {
            width: 100%;
        }
    </style>


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

这里我更改了 HTML 中的顺序以解决 z 轴问题，您可能还想在 CSS 中使用 z-index: number 来解决此问题。

在 CSS 中努力解决溢出问题

Struggling with getting overflow right in CSS

css

css-position

overflow