因此，我正在使用HTML，CSS和Javascript开发一个Electron应用程序。我有一个名为#mainGrid的容器div，它用作CSS网格容器。它具有100％的高度，因此背景色保持居中并从上到下覆盖:
screencap of starting screen
它可以正常工作，直到动态添加的内容导致溢出为止，然后向下滚动容器div并剪切其背景时:
screencap of clipping
我提供了一个DevTools的屏幕截图，突出显示了#mainGrid并在底部也显示了剪辑:
screencap of DevTools Highlighting
我发现调整窗口大小将使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;
}
如果还有任何其他代码也有帮助，请告诉我。谢谢!
编辑:这是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./style/main.css">
<title>Ultimate Quoting Tool 9000!!!</title>
</head>
<body>
<div id="mainGrid">
<div id="appHeader">
<h1>Quoting Tool 9000!!!</h1>
</div>
<div id="settingsDiv">
<a href="" id="settingsBtn">Settings</a>
</div>
<ul id="quoteList">
<li class="prodGrid">
<div class="prodHead">
<label>Substrates:</label>
</div>
<div class="prodBody">
<select>
<option>Coroplast</option>
<option>Sintra</option>
<option>Dibond</option>
</select>
</div>
<div class="dimenHead">
<label>Dimensions:</label>
</div>
<div class="dimenBody">
<label>Length:</label>
<input type="text" size="2">
<label>Width:</label>
<input type="text" size="2">
</div>
<div class="unitsHead">
<label>Units:</label>
</div>
<div class="unitsBody">
<select>
<option>cm</option>
<option>mm</option>
<option>ft</option>
<option>in</option>
<option>yd</option>
</select>
</div>
<div class="qtyHead">
<label>Qty:</label>
</div>
<div class="qtyBody">
<input type="text" size="2">
</div>
<div class="pricingHead">
<label>Pricing:</label>
</div>
<div>
<select>
<option>Regular</option>
<option>Trade</option>
</select>
</div>
<div class="totalHead">
<label>Total:</label>
</div>
<div class="totalBody">
<p>$1999.99</p>
</div>
<div class="notes">
<label class="notes">Notes:</label>
<input type="text">
</div>
</li>
</ul>
<div id="addProduct">
<a href="" id="addProductBtn">Add Product</a>
</div>
<div id="grandTotals">
<p>Subtotal: <br />
GST/Taxes: <br />
Discounts: <br />
Grand Total: <br />
</p>
<p>
<span id="subtotalVal">$1999.99</span><br />
<span id="taxVal">$100.00</span><br />
<span id="discountsVal">$0.00</span><br />
<span id="grandTotalVal">$2099.99</span>
</p>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
最佳答案
从CSS部分的min-height:100%; height:100%中删除属性:html,body。应该工作良好。
html, body {
background-color: rgb(96, 174, 238);
margin: 0px;
overflow: auto;
}
关于javascript - 向下滚动时，容器Div溢出将被裁剪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60820934/