將DIV子項的內容填充到整體網格布局

我正在嘗試css在我的網站上管理網格。使用Bootstrap 4.x 我使用 .x 創建了兩個 div 以具有相同的高度display:grid。我的問題是我不知道如何管理里面的孩子。我嘗試制作contenteditablediv 并使用 Javascript顯示用戶服務器端資訊。我無法讓 DIV 高度與父內容一起使用。我不想硬編碼它的高度。我想基于繼承來定義。

<div class="row">   
    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
        <div class="card shadow mb-4">          
            <div class="card-header py-3">
                <h6 class="card-title m-0 font-weight-bold text-primary">
                    param
                </h6>
            </div>              
            <div class="card-body">             
                <div class="row mb-2">                  
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <textarea rows="13" maxlength="1500"></textarea>
                    </div>                      
                </div>                  
            </div>
        </div>
    </div>      
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="card-title m-0 font-weight-bold text-primary">
                    consol
                </h6>
            </div>
            <div class="card-body">
                <div class="row mb-2">                  
                    <div id='console' class='mb-2'
                        style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; height: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
                        name="console" contenteditable="false"></div>
                </div>                  
            </div>              
        </div>
    </div>
</div>

為了更好地理解和可視化，我制作了一張圖片。

uj5u.com熱心網友回復：

嘗試設定第二個卡體行高：100%；Bootstrap 具有“h-100”類。

            <div class="card-body">
            <div class="row mb-2" style="height:100%">                  
                <div id='console' class='mb-2'
                    style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; height: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
                    name="console" contenteditable="false"></div>
            </div>                  
        </div>

uj5u.com熱心網友回復：

您可以只使用 BS 類將 div 填充到父高度。它被稱為h-100。只需檢查 row-div 在高度上是否也是 100%。

<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="card-title m-0 font-weight-bold text-primary">
                        consol
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row h-100 mb-2">                  
                        <div id='console' class='h-100 mb-2'
                            style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
                            name="console" contenteditable="false"></div>
                    </div>                  
                </div>              
            </div>
        </div>

標籤：html css 引导程序 4

上一篇：如何合并資料表中的2行單元格？

下一篇：我如何獲得表格中的總分值？