具有动态高度列的 CSS 网格

Question

<div class="grid">
  <div class="grid__item topbar"></div>
  <div class="grid__item title"></div>
  <div class="grid__item box1"></div>
  <div class="grid__item box2"></div>
  <div class="grid__item box3"></div>
  <div class="grid__item box4">
    <button class="add-content-btn">Add content</button>
    <p>Dynamic content</p>
  </div>
  <div class="grid__item sidebar">
    <button class="add-content-btn">Add content</button>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
    <p>Dynamic content</p>
  </div>
</div>

body {
  padding: 16px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: 
    "topbar topbar"
    "title  sidebar"
    "box1   sidebar"
    "box2   sidebar"
    "box3   sidebar"
    "box4   sidebar";
  grid-template-columns: 70% 30%;
  grid-template-rows: 28px 30px 500px 50px 20px auto;
}

.grid__item {
  border: 1px solid black;
}

.topbar {
  grid-area: topbar;
}

.title {
  grid-area: title;
}

.box1 {
  grid-area: box1;
}

.box2 {
  grid-area: box2;
}

.box3 {
  grid-area: box3;
}

.box4 {
  grid-area: box4;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  overflow: scroll;
  padding: 10px;
}

const btns = document.querySelectorAll('.add-content-btn');
btns.forEach(btn => {
  btn.addEventListener('click', e => {
    const parent = e.target.parentElement;
    for (let i = 0; i < 3; i++) {
      const newLine = document.createElement('p');
      newLine.innerText = 'Dynamic content';
      parent.append(newLine);
    }
  });
})

http://codepen.io/dye/pen/YVyoVd

在这个布局中，我有 2 列，每列的大小都可以增加。我希望右栏的高度由左栏的高度控制，而不是相反。

单击左下方框中的“添加内容”按钮将增加左栏和右栏。这按预期工作。

此时，单击右侧栏中的“添加内容”按钮将增加左侧栏。这是无意的。我希望右栏的高度最多为左栏的高度，并且里面的内容可以滚动。这可以使用 CSS 网格还是我需要使用 JS？

Answer 1

您可以在绝对位置使用额外的包装器以避免与原始布局交互。

const btns = document.querySelectorAll('.add-content-btn');
btns.forEach(btn => {
  btn.addEventListener('click', e => {
    const parent = e.target.parentElement;
    for (let i = 0; i < 3; i++) {
      const newLine = document.createElement('p');
      newLine.innerText = 'Dynamic content';
      parent.append(newLine);
    }
  });
})

body {
  padding: 16px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "topbar topbar" "title  sidebar" "box1   sidebar" "box2   sidebar" "box3   sidebar" "box4   sidebar";
  grid-template-columns: 70% 30%;
  grid-template-rows: 28px 30px 500px 50px 20px auto;
}

.grid__item {
  border: 1px solid black;
}

.topbar {
  grid-area: topbar;
}

.title {
  grid-area: title;
}

.box1 {
  grid-area: box1;
}

.box2 {
  grid-area: box2;
}

.box3 {
  grid-area: box3;
}

.box4 {
  grid-area: box4;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  position: relative;
}

.buffer {
  padding: 10px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
}

<div class="grid">
  <div class="grid__item topbar"></div>
  <div class="grid__item title"></div>
  <div class="grid__item box1"></div>
  <div class="grid__item box2"></div>
  <div class="grid__item box3"></div>
  <div class="grid__item box4">
    <button class="add-content-btn">Add content</button>

    <p>Dynamic content</p>
  </div>
  <div class="grid__item sidebar">
    <div class="buffer">
      <button class="add-content-btn">Add content</button>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
      <p>Dynamic content</p>
    </div>
  </div>
</div>

---

来 self 的评论:

you can try max-height and overflow, but specification are unclear about this and firefox will show the scroll where chrome will not http://codepen.io/gc-nomade/pen/Wjryym

You should relay on javascript or use an extra element set in absolute position within sidebar http://codepen.io/gc-nomade/pen/JNGZwW