根據 div 高度 bootstrap 自動調整面板的高度

Question

我是前端開發的新手。我們正在構建一個單頁應用程序，我們有兩個面板。

頂部的面板包含用於搜索的輸入文本，輸入文本下方是帶分頁的 ag-grid。

當用戶單擊網格列中的某些單元格值時，帶有解釋性文本的 div 會出現在網格下方和面板內。 現在這個文本長度可以從 2 行到 20 行不等。 我想要實現的是自動調整面板高度以覆蓋 ag-agrid 和 div，當文本較小時沒有任何空白，並且當文本較大時 div 中的文本不會溢出面板，這應該可以正常工作決議。我正在為面板使用 bootstrop css 類 - 面板的主要面板..感謝任何見解..

  <div class="container-fluid">
     <div class="panel panel-primary" style="height:auto">
         <div class= "panel-heading"> {{panelTitle}} </div>
            <div class="panel body">

                <ag-grid-angular class="ag-blue" [gridoptions]="gridOptions" rowModelType="pagination" style="min-height:70%"></ag-grid-angular>

                  <div class="alert"> {{description}}
                   </div>
            </div>
     </div>
 </div>

Answer 1

U可以使用CSS來自動設置面板的高度

.panel_name{
   height:auto;
}

Answer 2

在引導程序中，您可以使用 class “h-auto”

<div class="container-fluid">
   <div class="panel panel-primary h-auto">
     <div class= "panel-heading"> {{panelTitle}} </div>
        <div class="panel body">
            <ag-grid-angular class="ag-blue" [gridoptions]="gridOptions" rowModelType="pagination" style="min-height:70%"></ag-grid-angular>
              <div class="alert"> 
                 {{description}}
              </div>
        </div>
   </div>
</div>