具有动态高度列的 CSS 网格答案

【问题标题】：CSS Grid with dynamic height columns具有动态高度列的 CSS 网格
【发布时间】：2017-09-16 05:50:55
【问题描述】：

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

【问题讨论】：

您可以尝试 max-height 和溢出，但规范对此尚不清楚，Firefox 将显示滚动，其中 chrome 不会 codepen.io/gc-nomade/pen/Wjryym 您应该在 javascript 上中继或使用设置在绝对位置的额外元素在侧边栏codepen.io/gc-nomade/pen/JNGZwW 这是你的答案吗？
缓冲溶液看起来很棒。我会调查的。谢谢！

标签： css dynamic grid height

【解决方案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>

来自我的评论：

您可以尝试max-height 和overflow，但规范对此并不清楚，Firefox 会显示滚动，而chrome 不会http://codepen.io/gc-nomade/pen/Wjryym

您应该使用 javascript 或在侧边栏 http://codepen.io/gc-nomade/pen/JNGZwW 中使用absolute position 中设置的额外元素

【讨论】：