容器 Div 溢出在向下滚动时被截断

Question

所以我正在用 HTML、CSS 和 Javascript 制作一个 Electron 应用程序。我有一个名为 #mainGrid 的容器 div，它用作 CSS 网格容器。它具有 100% 的高度，因此背景颜色保持居中并从上到下覆盖：
screencap of starting screen
它工作正常，直到动态添加的内容导致溢出，然后当您向下滚动容器时 div 并且它的背景被剪裁：
screencap of clipping
我包含了 DevTools 的屏幕截图，突出显示了#mainGrid 并在底部显示了剪裁：
screencap of DevTools Highlighting
我发现调整 window 的大小会使 div "catch up" 再次达到 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>99.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">99.99</span><br />
                    <span id="taxVal">0.00</span><br />
                    <span id="discountsVal">[=12=].00</span><br />
                    <span id="grandTotalVal">99.99</span>
                </p>
            </div>

        </div>

    <script src="./index.js"></script>
</body>

</html>

Answer 1

从 CSS 部分的 html,body 中删除属性：min-height:100%; height:100%。应该很好用。

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%;
}

我应该说我在找到这个帖子后有了突破：
Background cuts off when html and body height are set to 100%

容器 Div 溢出在向下滚动时被截断

Container Div overflow gets clipped when scrolling down

html

javascript

css

overflow

electron