gpt4 book ai didi

javascript - div 容器拉伸(stretch)超过 100% 高度

转载 作者:行者123 更新时间:2023-11-30 13:47:51 25 4
gpt4 key购买 nike

<分区>

我想要一个特定的 div 容器的滚动条。所以我目前拥有的是这个

$(document).ready(() => {
for (let i = 0; i < 100; i++) {
const newDiv = (`<div>Log Item</div>`);
$("#logsContainer").append(newDiv);
}
});
#page {
display: grid;
grid-template-columns: 50% 50%;
height: 100%;
}

@media (max-width: 800px) {
#panel {
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
}

#logsContainer {
overflow-y: scroll;
height: 100px;
/*
calc(100% - 18px);
18px because the "Logs" title has a height of 18
*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
<div>
Commands
</div>

<div>
<div>
Logs
</div>
<div id="logsContainer">
</div>
</div>
</div>

如您所见,日志在 100 像素的硬编码高度上有自己的滚动条。我想将这个容器拉伸(stretch)到底部 (100%)。当然,我必须从中减去标题高度。所以如果我传入 calc(100% - 18px); 我会得到这个结果

$(document).ready(() => {
for (let i = 0; i < 100; i++) {
const newDiv = (`<div>Log Item</div>`);
$("#logsContainer").append(newDiv);
}
});
#page {
display: grid;
grid-template-columns: 50% 50%;
height: 100%;
}

@media (max-width: 800px) {
#panel {
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
}

#logsContainer {
overflow-y: scroll;
height: calc(100% - 18px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
<div>
Commands
</div>

<div>
<div>
Logs
</div>
<div id="logsContainer">
</div>
</div>
</div>

但是正如您所见,div 容器的高度大于页面高度的 100%。如何正确拉伸(stretch)该日志容器?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com