css网格表溢出容器

问题描述 投票：0回答：1

container
类 div 不会环绕 
<header>
<main>
<footer>
，而是溢出。红色背景颜色在页面末尾之前停止的位置可见。布局是一个带有弹性表格的 CSS 网格。如何将网格表包裹在容器内？

    body,
    html {
        height: 100%;
        margin: 0;
        font-family: Verdana,
            Arial,
            'Lucida Grande',
            sans-serif;
        font-size: 16px;
    }

    header,
    footer {
        background-color: lightblue;
    }

    main {
        flex: 1;
    }

    footer {
        margin-top: 20px;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 3px;
        background-color: red;
    }

    .body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .flex-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #ccc;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-cell {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: lightgrey;
        padding: 6px;
        border-right: 1px solid #ccc;
        word-break: break-word;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .justify-center {
        justify-content: center;
    }

    .flex-cell:last-child {
        border-right: none;
    }

    .head-flex-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .head-flex-row {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }

    .head-flex-column {
        flex: 1;
        border: 1px solid black;
        padding: 10px;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 2;
    }

    .flex-3 {
        flex: 3;
    }

    .flex-4 {
        flex: 4;
    }

    .flex-5 {
        flex: 5;
    }

    .flex-6 {
        flex: 6;
    }

    .flex-7 {
        flex: 7;
    }

    /* ------------------------ */

    .grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        border-top: 1px solid gray;
        border-left: 1px solid gray;
    }

    .grid-column-1 {
        grid-column: span 1;
    }

    .grid-column-2 {
        grid-column: span 2;
    }

    .grid-column-3 {
        grid-column: span 3;
    }

    .grid-column-4 {
        grid-column: span 4;
    }

    .grid-column-5 {
        grid-column: span 5;
    }

    .grid-column-10 {
        grid-column: span 10;
    }

    .grid-column {
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        padding: 6px;
    }

    /* ------------------------ */

    .ordini .flex-row.row-header {
        border: 1px solid #ccc;
    }

    .ordini .flex-row:last-child {
        flex: 1;
    }
<body>
    <div class="container">
        <header>


            <div class="flex-table">
                <div class="flex-row">
                    <div class="flex-cell flex-5 text-center justify-center">
                        {% if Logo.LogoPath != '' and Logo.LogoPath != null %}
                        <img src="{{ Logo.LogoPath }}" alt="" style="max-height:150px;" />
                        {% else %}
                        <img src="{% logo %}" alt="" style="max-height:150px;" />
                        {% endif %}
                    </div>
                    <div class="flex-cell flex-5">
                        <p><b>Recipient:</b></p>
                        <p><b>{{Quote.CrossId}}</b></p>
                        <p><b>{{Company.Address}}</b></p>
                        <p><b>{{Company.ZipCode}} - {{Company.City}} {{Company.Province}}</b></p>
                    </div>
                </div>
            </div>

            <div class="flex-table">
                <div class="flex-row">
                    <div class="flex-cell flex-5 text-left">
                        Riferim./Reference: {{Quote.Reference}}
                    </div>
                </div>
            </div>

            <div class="grid">
                <div class="grid-column grid-column-5">Customer Sales Order n° {{Quote.Number}} of {{Quote.QuoteDate |
                    format_date, 'dd/MM/yyyy' }}</div>
                <div class="grid-column grid-column-4">Delivery date:&npsp;{{Quote.ShipDate | format_date, 'dd/MM/yyyy'
                    }}</div>
                <div class="grid-column grid-column-1">Page 1/1</div>
                <div class="grid-column grid-column-3">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Account:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.CompanyCode}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                VAT Number:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.VatId}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Fiscal Code:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.TaxIdentificationNumber}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Port:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.Porto}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Inv1:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Inv2:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-2">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Categ.:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Place:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-5">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Payment:
                            </div>
                            <div class="flex-cell flex-2">
                                {{Company.PaymentModeId}}
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.PaymentCodes}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Bank:
                            </div>
                            <div class="flex-cell flex-2">
                                {{Company.BankId}}
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.Bank}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Agent:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.FreeFields[9].Value}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                -
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.CurrencyId}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                D/i type:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                Preventivo
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                S.ord.Inv.:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </header>
        <main>
            <div class="body">
                <div class="flex-table ordini">
                    <div class="flex-row row-header">
                        <div class="flex-cell text-center">Item</div>
                        <div class="flex-cell text-center">Description</div>
                        <div class="flex-cell text-center">UM</div>
                        <div class="flex-cell text-center">Quantity</div>
                        <div class="flex-cell text-center">Unity Price</div>
                        <div class="flex-cell text-center">Discount</div>
                        <div class="flex-cell text-center">VAT</div>
                        <div class="flex-cell text-center">Amount</div>
                        <div class="flex-cell text-center">Deliv.</div>
                    </div>
                    {% for row in Quote.ErpRows %}
                    <div class="flex-row">
                        <div class="flex-cell text-center">{{ row.ProductCode }}</div>
                        <div class="flex-cell">{{ row.description }}</div>
                        <div class="flex-cell text-center">{{ row.UnitMeasure | empty_cell }}</div>
                        <div class="flex-cell">{% if row.FooterDiscount != 0 %} {{ row.Qta | format_decimal, 2 |
                            empty_cell }} {% endif %}</div>
                        <div class="flex-cell">{{ var_currency_symbol }}&nbsp;{{ row.UnitPrice | format_decimal, 2 |
                            empty_cell }}</div>
                        <div class="flex-cell">{% if row.DiscountFormula != 0 %} {{ row.DiscountFormula |
                            format_decimal, 2 | empty_cell }} {% endif %}</div>
                        <div class="flex-cell">{% if row.Tax != 0 %} {{ row.Tax | format_decimal, 0 | empty_cell }} {%
                            endif %}</div>
                        <div class="flex-cell">{{ var_currency_symbol }}&nbsp;{{ row.Amount | format_decimal, 2 |
                            empty_cell }}</div>
                        <div class="flex-cell">{{Quote.ShipDate | format_date, 'dd/MM/yyyy' }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </main>
        <footer>
            <div class="grid">
                <div class="grid-column grid-column-10 text-left">
                    Note: {{Quote.Description | empty_cell }}
                </div>
                <div class="grid-column grid-column-5">

                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Delivery by:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.ShippedBy | empty_cell }}
                            </div>
                            <div class="flex-cell flex-2">
                                Mittente:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Carrier:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.Carrier}}
                            </div>
                            <div class="flex-cell flex-2">
                            </div>
                            <div class="flex-cell flex-4">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-5">
                    <div class="flex-grid-2">
                        <div class="flex-table">
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    % Discount:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {% if Quote.FooterDiscount != 0 %} {{ Quote.FooterDiscount | format_decimal, 2 |
                                    empty_cell }} {% endif %}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    Transport costs:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {{Quote.CurrencyShip | format_decimal, 2 | empty_cell }}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    Total Goods:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {{Quote.SubTotal | format_decimal, 2 | empty_cell }}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    <b>Document Total:</b>
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    <b>{{Quote.GrandTotal | format_decimal, 2 | empty_cell }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

html css
1个回答
0
投票

从容器中取出

height: 100%;
。

body,
    html {
        height: 100%;
        margin: 0;
        font-family: Verdana,
            Arial,
            'Lucida Grande',
            sans-serif;
        font-size: 16px;
    }

    header,
    footer {
        background-color: lightblue;
    }

    main {
        flex: 1;
    }

    footer {
        margin-top: 20px;
    }

    .container {
        display: flex;
        flex-direction: column;
      
        padding: 3px;
        background-color: red;
    }

    .body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .flex-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        border: 1px solid #ccc;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .flex-cell {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: lightgrey;
        padding: 6px;
        border-right: 1px solid #ccc;
        word-break: break-word;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .justify-center {
        justify-content: center;
    }

    .flex-cell:last-child {
        border-right: none;
    }

    .head-flex-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .head-flex-row {
        display: flex;
        width: 100%;
        margin-bottom: 10px;
    }

    .head-flex-column {
        flex: 1;
        border: 1px solid black;
        padding: 10px;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        flex: 2;
    }

    .flex-3 {
        flex: 3;
    }

    .flex-4 {
        flex: 4;
    }

    .flex-5 {
        flex: 5;
    }

    .flex-6 {
        flex: 6;
    }

    .flex-7 {
        flex: 7;
    }

    /* ------------------------ */

    .grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        border-top: 1px solid gray;
        border-left: 1px solid gray;
    }

    .grid-column-1 {
        grid-column: span 1;
    }

    .grid-column-2 {
        grid-column: span 2;
    }

    .grid-column-3 {
        grid-column: span 3;
    }

    .grid-column-4 {
        grid-column: span 4;
    }

    .grid-column-5 {
        grid-column: span 5;
    }

    .grid-column-10 {
        grid-column: span 10;
    }

    .grid-column {
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        padding: 6px;
    }

    /* ------------------------ */

    .ordini .flex-row.row-header {
        border: 1px solid #ccc;
    }

    .ordini .flex-row:last-child {
        flex: 1;
    }
<body>
    <div class="container">
        <header>


            <div class="flex-table">
                <div class="flex-row">
                    <div class="flex-cell flex-5 text-center justify-center">
                        {% if Logo.LogoPath != '' and Logo.LogoPath != null %}
                        <img src="{{ Logo.LogoPath }}" alt="" style="max-height:150px;" />
                        {% else %}
                        <img src="{% logo %}" alt="" style="max-height:150px;" />
                        {% endif %}
                    </div>
                    <div class="flex-cell flex-5">
                        <p><b>Recipient:</b></p>
                        <p><b>{{Quote.CrossId}}</b></p>
                        <p><b>{{Company.Address}}</b></p>
                        <p><b>{{Company.ZipCode}} - {{Company.City}} {{Company.Province}}</b></p>
                    </div>
                </div>
            </div>

            <div class="flex-table">
                <div class="flex-row">
                    <div class="flex-cell flex-5 text-left">
                        Riferim./Reference: {{Quote.Reference}}
                    </div>
                </div>
            </div>

            <div class="grid">
                <div class="grid-column grid-column-5">Customer Sales Order n° {{Quote.Number}} of {{Quote.QuoteDate |
                    format_date, 'dd/MM/yyyy' }}</div>
                <div class="grid-column grid-column-4">Delivery date:&npsp;{{Quote.ShipDate | format_date, 'dd/MM/yyyy'
                    }}</div>
                <div class="grid-column grid-column-1">Page 1/1</div>
                <div class="grid-column grid-column-3">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Account:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.CompanyCode}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                VAT Number:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.VatId}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Fiscal Code:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.TaxIdentificationNumber}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Port:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.Porto}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Inv1:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Inv2:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-2">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Categ.:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Place:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-5">
                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Payment:
                            </div>
                            <div class="flex-cell flex-2">
                                {{Company.PaymentModeId}}
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.PaymentCodes}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Bank:
                            </div>
                            <div class="flex-cell flex-2">
                                {{Company.BankId}}
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.Bank}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                Agent:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.FreeFields[9].Value}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                -
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                {{Company.CurrencyId}}
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                D/i type:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                Preventivo
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-1">
                                S.ord.Inv.:
                            </div>
                            <div class="flex-cell flex-2">
                                -
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </header>
        <main>
            <div class="body">
                <div class="flex-table ordini">
                    <div class="flex-row row-header">
                        <div class="flex-cell text-center">Item</div>
                        <div class="flex-cell text-center">Description</div>
                        <div class="flex-cell text-center">UM</div>
                        <div class="flex-cell text-center">Quantity</div>
                        <div class="flex-cell text-center">Unity Price</div>
                        <div class="flex-cell text-center">Discount</div>
                        <div class="flex-cell text-center">VAT</div>
                        <div class="flex-cell text-center">Amount</div>
                        <div class="flex-cell text-center">Deliv.</div>
                    </div>
                    {% for row in Quote.ErpRows %}
                    <div class="flex-row">
                        <div class="flex-cell text-center">{{ row.ProductCode }}</div>
                        <div class="flex-cell">{{ row.description }}</div>
                        <div class="flex-cell text-center">{{ row.UnitMeasure | empty_cell }}</div>
                        <div class="flex-cell">{% if row.FooterDiscount != 0 %} {{ row.Qta | format_decimal, 2 |
                            empty_cell }} {% endif %}</div>
                        <div class="flex-cell">{{ var_currency_symbol }}&nbsp;{{ row.UnitPrice | format_decimal, 2 |
                            empty_cell }}</div>
                        <div class="flex-cell">{% if row.DiscountFormula != 0 %} {{ row.DiscountFormula |
                            format_decimal, 2 | empty_cell }} {% endif %}</div>
                        <div class="flex-cell">{% if row.Tax != 0 %} {{ row.Tax | format_decimal, 0 | empty_cell }} {%
                            endif %}</div>
                        <div class="flex-cell">{{ var_currency_symbol }}&nbsp;{{ row.Amount | format_decimal, 2 |
                            empty_cell }}</div>
                        <div class="flex-cell">{{Quote.ShipDate | format_date, 'dd/MM/yyyy' }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </main>
        <footer>
            <div class="grid">
                <div class="grid-column grid-column-10 text-left">
                    Note: {{Quote.Description | empty_cell }}
                </div>
                <div class="grid-column grid-column-5">

                    <div class="flex-table">
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Delivery by:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.ShippedBy | empty_cell }}
                            </div>
                            <div class="flex-cell flex-2">
                                Mittente:
                            </div>
                            <div class="flex-cell flex-4">
                                -
                            </div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-cell flex-2">
                                Carrier:
                            </div>
                            <div class="flex-cell flex-4">
                                {{Quote.Carrier}}
                            </div>
                            <div class="flex-cell flex-2">
                            </div>
                            <div class="flex-cell flex-4">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="grid-column grid-column-5">
                    <div class="flex-grid-2">
                        <div class="flex-table">
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    % Discount:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {% if Quote.FooterDiscount != 0 %} {{ Quote.FooterDiscount | format_decimal, 2 |
                                    empty_cell }} {% endif %}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    Transport costs:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {{Quote.CurrencyShip | format_decimal, 2 | empty_cell }}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    Total Goods:
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    {{Quote.SubTotal | format_decimal, 2 | empty_cell }}
                                </div>
                            </div>
                            <div class="flex-row">
                                <div class="flex-cell flex-3">
                                    <b>Document Total:</b>
                                </div>
                                <div class="flex-cell flex-7 text-right">
                                    <b>{{Quote.GrandTotal | format_decimal, 2 | empty_cell }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.