Currently, I am developing an Electron application using HTML, CSS, and Javascript. In my project, there is a container div named #mainGrid that acts as a CSS grid container with 100% height to ensure the background color remains centered and covers the entire vertical space:
screenshot of initial screen
Everything functions properly until dynamically added content causes overflow, resulting in the clipping of the container div and its background when scrolling down:
screenshot of clipping issue
I captured a screenshot of DevTools highlighting the #mainGrid and displaying the same clipping problem at the bottom:
DevTools Highlighting screenshot
Upon resizing the window, the div adjusts to 100% height again. However, it should stay at 100% without needing to readjust every time. I am struggling to fix this issue and would greatly appreciate any assistance. Below is my current CSS:
html, body {
background-color: rgb(96, 174, 238);
margin: 0px;
min-height: 100%;
height: 100%;
overflow: auto;
}
/*----Main grid area ----*/
#mainGrid {
background-color: rgb(233, 233, 233);
border-style: none groove none groove;
margin: 0 100px 0 100px;
min-height: 100%;
height: 100%;
display: grid;
grid: 'appHeader settingsDiv'
'products products'
'addProdBtn grandTotals';
align-content: start;
}
If additional code would be useful for troubleshooting, please let me know. Thank you!
edit: Here's the corresponding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./style/main.css">
<title>Ultimate Quoting Tool 9000!!!</title>
</head>
<body>
<div id="mainGrid">
<div id="appHeader">
<h1>Quoting Tool 9000!!!</h1>
</div>
<div id="settingsDiv">
<a href="" id="settingsBtn">Settings</a>
</div>
<ul id="quoteList">
<li class="prodGrid">
<div class="prodHead">
<label>Substrates:</label>
</div>
<!-- Rest of the HTML content goes here -->
</li>
</ul>
<div id="addProduct">
<a href="" id="addProductBtn">Add Product</a>
</div>
<div id="grandTotals">
<!-- Grand Total calculations listed here -->
</div>
</div>
<script src="./index.js"></script>
</body>
</html>