所以我正在使用 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 關注
- 138 瀏覽
添加回答
舉報
0/150
提交
取消