向下滚动时，容器 Div 溢出被剪裁答案

【问题标题】：Container Div overflow gets clipped when scrolling down向下滚动时，容器 Div 溢出被剪裁
【发布时间】：2020-07-04 08:26:11
【问题描述】：

所以我正在用 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>

【问题讨论】：

HTML 将是必需的。金额部分似乎不是#mainGrid 的一部分。将需要 HTML 标记来确认。
@DumbCoder7 添加:)
我也添加了答案

标签： javascript html css electron overflow

【解决方案1】：

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

html, body {
    background-color: rgb(96, 174, 238); 
    margin: 0px;  

    overflow: auto;
}

【讨论】：

谢谢！这确实解决了剪辑问题。但是，现在#mainGrid 在启动时不适合 100% 的窗口高度。关于如何在没有剪辑的情况下实现这一点有什么想法吗？
如果你想要的话，可以在#mainGrid Css 中尝试height:100vh。如果您有标题，您可能需要更改它90vh 左右。
所以 100vh 在开始时有效，但随后出现同样的问题。一旦内容溢出，向下滚动剪辑 #mainGrid 及其背景，而不是内部内容。同时调整窗口大小将导致#mainGrid 高度“赶上”并再次填充 100vh.. 太奇怪了！

【解决方案2】：

天哪，我修好了！所以，我不得不将我的#mainGrid 上的“高度”更改为“最小高度”.. 另外值得注意的是，必须在 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%

【讨论】：