动态高度列

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

在这种布局中CSS格，我有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>

---

从我的评论：

你可以尝试max-height和overflow，但规格目前还不清楚这件事，Firefox会显示滚动，其中Chrome不会http://codepen.io/gc-nomade/pen/Wjryym

你应该继电器上的JavaScript或使用absoluteposition设置一个额外的元素栏http://codepen.io/gc-nomade/pen/JNGZwW