填充 DIV child 的内容到整体网格布局

Question

我正尝试在我的站点上使用 css 管理网格。使用 Bootstrap 4.x 我使用 display:grid 创建了两个 div 具有相同的高度。我的问题是我不知道如何管理里面的孩子。我尝试让 contenteditable div 和 using Javascript 显示用户 server-side 信息。我无法获得 DIV 高度来处理 parent 内容。我不想 hard-code 它的高度。我想基于继承来定义。

<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>

为了更好地理解和可视化，我做了一个 image。

Answer 1

尝试设置第二 card-body 行 height:100% ； Bootstrap 有 class "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>

Answer 2

您可以只使用 BS-class 将 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>

填充 DIV child 的内容到整体网格布局

Fill DIV child's content to overall grid layout

html

css

bootstrap-4