基于％，固定和绝对定位的嵌套元素？

Question

图像： 我有一个容器div（黄色），我想保持窗口宽度的50％。该容器的子容器是图像div（紫色），它伸展到父容器宽度的100％。并且在图像div的顶部有一个粘性标签（粉红色）（位置：绝对，因此它可以相对于图像偏移）。 我想保持整个屏幕的一半固定位置，以便在滚动时保持粘性。

图像下方还有一个标题，无论是否有人垂直缩小窗口，该标题都需要显示。因此，在这种情况下，图像div 应该在需要时垂直缩小，以便显示该标题。

基本上我试图让图像div始终是父容器div 的100％宽度。图像div具有 max％height ，因此可以垂直收缩。或者当它垂直收缩时保持固定的纵横比（3：4或其他）。

我试图避免在整个CSS中使用固定像素或ems。因为网站需要垂直弹性/“流畅”，因为图像下的标题必须显示。

HTML看起来大致如下：

<wrapper>
    <left-column>
        <normal text and scrollable stuff>
    <right-column-yellow>
        <image sticky label-pink>
        <image div-purple>
        <image title>

对不起，如果这真是让人困惑我的大脑被炸了！任何人都可以帮助我吗？

Answer 1

您可以使用固定位置划分左右面板。

如果我的描述没错，那就是答案。

<div class="wrapper">
  <div class="left">
   <p><!--Some very long text--></p>
  </div>
  <div class="right">
    <div class="image">
    <div class="label">Label</div>
    <div class="title">Title</div>
  </div>
</div>

一些CSS

.left,.right{
    position: fixed;
    width: 50%;
    height: 100%;
    display: inline-block;
  }

  .left{
    left:0;
    top: 0;
    overflow: auto;
  }

  .right{
    right: 0;
    top:0;
    background-color: yellow;
  }

  .right .image{
    position: relative;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    background-color: #fff;
    transform: translateY(-50%);
  }

  .right .image .label{
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    text-align: center;
    width: 200px;
    background-color: pink;
    margin: auto;
  }

  .right .image .title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    text-align: center;
    width: 200px;
    background-color: #000;
    margin: auto;
    color: #fff;
    font-size: 30px;
  }

你也可以参考我的可待因。 https://codepen.io/masonwongcs/pen/WMJGZb