向下滚动时容器 Div 溢出被剪裁

Question

所以我正在使用 HTML、CSS 和 Javascript 制作一个 Electron 应用程序。我有一个名为 #mainGrid 的容器 div，它用作 CSS 网格容器。它具有 100% 的高度，因此背景颜色保持居中并从上到下覆盖：
起始屏幕的 screencap
它工作正常，直到动态添加的内容导致溢出，然后当您向下滚动容器 div 时，其背景被剪裁： 剪裁 I
的 screencap
包含了 DevTools 的屏幕截图，突出显示了 #mainGrid 并在底部显示了剪辑：
DevTools 突出显示的屏幕截图
我发现调整窗口大小将使 div 再次“赶上”100% 高度，但它应该保持 100%，对吗？我对此一筹莫展。任何帮助是极大的赞赏。这是我当前的 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;

}

如果任何其他代码也有帮助，请告诉我。谢谢！

Answer 1

min-height:100%; height:100%从html,bodyCSS 部分中删除属性： 。应该运作良好。html, body {    background-color: rgb(96, 174, 238);     margin: 0px;      overflow: auto;}

Answer 2

天哪，我修好了！因此，我必须将 #mainGrid 上的“height”更改为“min-height”。另外值得注意的是，还必须保留 html 和 body 标记中的 height 属性，因为它们是父级，并且 margin = 0px ，因此 #mainGrid 将拉伸到顶部和底部。这是新的工作 CSS：html, body {    background-color: rgb(96, 174, 238);     margin: 0px;     overflow: auto;    height: 100%;}/*----Main grid area ----*/#mainGrid {    background-color: rgb(233, 233, 233);    border-style: none groove none groove;    margin: 0 100px 0 100px;    display: grid;    grid: 'appHeader settingsDiv'        'products products'        'addProdBtn grandTotals';    align-content: start;    min-height: 100%;}