Переполнение контейнера Div обрезается при прокрутке вниз - PullRequest
Новая
       4

Переполнение контейнера Div обрезается при прокрутке вниз

0 голосов
/ 23 марта 2020

Итак, я создаю приложение Electron с HTML, CSS и Javascript. У меня есть контейнер div с именем #mainGrid, который служит контейнером CSS. Он имеет высоту 100%, поэтому цвет фона остается в центре и покрывает сверху вниз: screencap стартового экрана Он работает нормально до тех пор, пока динамически добавляемый контент не вызовет переполнение, а затем, когда вы прокрутите вниз div контейнера и его фон будет обрезан: экранная вырезка Я включил скриншот шапки DevTools с выделением #mainGrid и показом отсечения внизу: Экранная подсветка 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;
}

Если какой-либо дополнительный код будет полезен, пожалуйста, дайте мне знать. Спасибо!

edit: Вот это 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>

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Омг, я исправил это! Итак, мне пришлось изменить "height" в моем #mainGrid на "min-height". Также стоит отметить, что атрибут * height должен был содержать html, а также теги body, поскольку они являются родителями, и поле = 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%;
}

Я должен упомянуть, что у меня был прорыв после нахождения этой темы: Фон обрезается, когда html и рост установлены на 100%

0 голосов
/ 24 марта 2020

Удалите свойства: min-height:100%; height:100% из html,body в разделе CSS. Должно работать хорошо. 

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

    overflow: auto;
}
...