向下滚动时容器 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%;

}