％基於固定和絕對定位的嵌套元素？

Question

圖片： 我有一個容器div（黃色） ，我想保持窗口寬度的50％。 該容器的子級是圖像div（紫色） ，其圖像延伸到父容器寬度的100％。 並且在圖像div的頂部有一個粘性標簽（粉紅色） （位置：絕對，因此可以相對於圖像進行偏移）。 我想將整個屏幕的一半保持固定的位置，以便在滾動時保持粘性。

圖像下方還有一個標題，無論有人垂直縮小窗口如何，該標題都必須可見。 因此，在這種情況下，如果需要， 圖像div應該垂直縮小，以便顯示該標題。

基本上，我試圖使圖像div始終是父容器div的 100％ 寬度 。 圖像div的最大高度為％，因此可以垂直縮小。 或者在垂直收縮時保持固定的縱橫比（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