动态高度列
问题描述:
<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?
答
您可以在绝对位置使用额外的包装,以避免与原始布局的交互。
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或使用
absolute
position
设置一个额外的元素栏http://codepen.io/gc-nomade/pen/JNGZwW
内,你可以尝试最大高度和溢出,但规格目前还不清楚这件事,Firefox会显示滚动,其中Chrome将不是http: //codepen.io/gc-nomade/pen/Wjryym你应该在JavaScript上进行中继或在补充工具栏中使用绝对位置设置的额外元素http://codepen.io/gc-nomade/pen/JNGZwW这是你的答案吗? –
缓冲解决方案看起来不错。我会研究一下。谢谢! – dye