🪴qql1's digital garden

独立滚动双列布局

1分钟阅读

same::

主从列布局

  • CSS
  • father::常见的前端业务需求
  • 左侧的“主列表”决定了整体结构，右侧的“详情区域”内容可变且可以独立滚动

效果示例

实现

原理

  • 容器高度auto，由子元素撑开
  • 右边列的内容实用绝对布局脱离文档流，使其不撑开容器
    • 并设置四条边贴合右边列容器

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Two Column Popup Layout Demo</title>
  </head>
  <body
    style="
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    "
  >
    <button
      id="open-popup-btn"
      style="padding: 10px 20px; font-size: 16px; cursor: pointer"
    >
      打开弹窗
    </button>
 
    <div
      id="popup-overlay"
      style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      "
    >
      <div
        id="popup"
        style="
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          width: 80%;
          max-width: 800px;
          max-height: 90vh;
          display: flex;
          flex-direction: column;
        "
      >
        <div
          class="popup-header"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            border-bottom: 1px solid #ccc;
            flex-shrink: 0;
          "
        >
          <h2 style="margin: 0">双列布局弹窗</h2>
          <button
            id="close-popup-btn"
            style="
              background: none;
              border: none;
              font-size: 24px;
              cursor: pointer;
            "
          >
            &times;
          </button>
        </div>
 
        <div
          class="popup-content"
          style="flex-grow: 1; min-height: 0; display: flex"
        >
          <div
            class="left-column"
            style="
              width: 50%;
              padding: 20px;
              border-right: 1px solid #ccc;
              box-sizing: border-box;
            "
          >
            <h4>左侧栏</h4>
            <p>这一列的内容决定了弹窗的整体高度。</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>最后一行内容，撑开高度。</p>
          </div>
          <div style="position: relative; width: 50%">
            <div
              class="right-column"
              style="
                padding: 20px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                box-sizing: border-box;
                overflow-y: auto;
              "
            >
              <h4>右侧栏</h4>
              <p>这一列的内容如果超出左侧的高度，就会出现滚动条。</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <p>
                Sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </p>
              <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.
              </p>
              <p>
                Excepteur sint occaecat cupidatat non proident, sunt in culpa
                qui officia deserunt mollit anim id est laborum.
              </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <p>
                Sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </p>
              <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.
              </p>
              <p>
                Excepteur sint occaecat cupidatat non proident, sunt in culpa
                qui officia deserunt mollit anim id est laborum.
              </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <p>
                Sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua.
              </p>
              <p>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </p>
              <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.
              </p>
              <p>这一行是右侧的最后一行，用来确保内容足够长。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const openBtn = document.getElementById("open-popup-btn");
        const closeBtn = document.getElementById("close-popup-btn");
        const popupOverlay = document.getElementById("popup-overlay");
 
        // 默认隐藏弹窗
        popupOverlay.style.display = "none";
 
        openBtn.addEventListener("click", () => {
          popupOverlay.style.display = "flex";
        });
 
        closeBtn.addEventListener("click", () => {
          popupOverlay.style.display = "none";
        });
 
        popupOverlay.addEventListener("click", (event) => {
          if (event.target === popupOverlay) {
            popupOverlay.style.display = "none";
          }
        });
      });
    </script>
  </body>
</html>
指向原始笔记的链接

关系图谱