Fill DIV child's content to overall grid layout-CodePudding

I am trying to manage the grid with css on my site. Using Bootstrap 4.x I created both divs to have the same height using display:grid. My problem is I don't know how to manage the kids inside. I try to make the contenteditable div and using Javascript show the user server-side information. I can't get the DIV height to work with parent content. I do not want to hard-code its height. I would like to define based on inheritance.

<div >   
    <div  style="display: grid;">
        <div >          
            <div >
                <h6 >
                    param
                </h6>
            </div>              
            <div >             
                <div >                  
                    <div >
                        <textarea rows="13" maxlength="1500"></textarea>
                    </div>                      
                </div>                  
            </div>
        </div>
    </div>      
    <div  style="display: grid;">
        <div >
            <div >
                <h6 >
                    consol
                </h6>
            </div>
            <div >
                <div >                  
                    <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>

For better understanding and visualisation i made an image.

CodePudding user response：

try to setup second card-body row height:100% ; Bootstrap has class "h-100".

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

CodePudding user response：

You can just use a BS-class to fill the div to the parent height. It's called h-100. Just check whether the row-div is also 100% at height.

<div  style="display: grid;">
            <div >
                <div >
                    <h6 >
                        consol
                    </h6>
                </div>
                <div >
                    <div >                  
                        <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>