所以我正在使用 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;}如果任何其他代码也有帮助，请告诉我。谢谢！
2 回答
森栏
TA贡献1810条经验 获得超5个赞
min-height:100%; height:100%从html,bodyCSS 部分中删除属性： 。应该运作良好。
html, body {
background-color: rgb(96, 174, 238);
margin: 0px;
overflow: auto;
}
PIPIONE
TA贡献1829条经验 获得超9个赞
天哪，我修好了！因此，我必须将 #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%;
}
- 2 回答
- 0 关注
- 65 浏览
添加回答
举报
0/150
提交
取消