所以我正在使用 HTML、CSS 和 Javascript 制作一個(gè) Electron 應(yīng)用程序。我有一個(gè)名為 #mainGrid 的容器 div，它用作 CSS 網(wǎng)格容器。它具有 100% 的高度，因此背景顏色保持居中并從上到下覆蓋：起始屏幕的 screencap它工作正常，直到動(dòng)態(tài)添加的內(nèi)容導(dǎo)致溢出，然后當(dāng)您向下滾動(dòng)容器 div 時(shí)，其背景被剪裁： 剪裁 I的 screencap包含了 DevTools 的屏幕截圖，突出顯示了 #mainGrid 并在底部顯示了剪輯：DevTools 突出顯示的屏幕截圖我發(fā)現(xiàn)調(diào)整窗口大小將使 div 再次“趕上”100% 高度，但它應(yīng)該保持 100%，對(duì)嗎？我對(duì)此一籌莫展。任何幫助是極大的贊賞。這是我當(dāng)前的 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;}如果任何其他代碼也有幫助，請(qǐng)告訴我。謝謝！
2 回答
森欄
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊
min-height:100%; height:100%從html,bodyCSS 部分中刪除屬性： 。應(yīng)該運(yùn)作良好。
html, body {
background-color: rgb(96, 174, 238);
margin: 0px;
overflow: auto;
}
PIPIONE
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊
天哪，我修好了！因此，我必須將 #mainGrid 上的“height”更改為“min-height”。另外值得注意的是，還必須保留 html 和 body 標(biāo)記中的 height 屬性，因?yàn)樗鼈兪歉讣?jí)，并且 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 關(guān)注
- 144 瀏覽
添加回答
舉報(bào)
0/150
提交
取消