I am trying to incorporate a scrollbar for a specific div container. Here is the current code snippet that I have:
$(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>Currently, the logs container has a hardcoded height of 100px. I want to make it stretch to the bottom (100% height) of the page, considering the height of the title. When I use calc(100% - 18px);, the container height exceeds the page height. How can I adjust the height of the log container correctly?