HTML - Divをサイズに基づいて拡大または縮小する

Question

divを動的に展開して、その下のコンテンツを常に表示したい。私は次のhtmlを持っています：

<div class="header"> 
    <div class="expandableDiv container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       @Html.Partial("_company") 
      </div> 
     </div> 
    </div> 
    <div class="companyNavBar"> 
     <div class="navbar"> 
      <a href="#section-documents">Documents</a> 
      <a href="#section-holdings">Holdings</a> 
      <a href="#section-transactions">Transactions</a> 
     </div> 
    </div> 
</div> 
<div class="content"> 
    @{Html.RenderAction("Documents", "Company");} 
    @{Html.RenderAction("Holdings", "Company");} 
    @{Html.RenderAction("Transactions", "Company");} 
</div> 

一部のデータに基づいて、HTMLの部分的な部分の高さは異なります。現在、class = companyNavBarのdivは、元の高さが大きくなると非表示になります。どうすればそれを見えるようにすることができますか？

これは私のCSSです：

.content { 
position: absolute; 
top: 310px; 
left: 19px; 
right: 0px; 
bottom: 0px; 
overflow-y: scroll; 
background-color: white; 
} 

.companyNavBar { 
    margin-left: 14px; 
} 

Answer 1

あなたはjQueryのを使用したい場合は、（必要に応じて、特定のdivに変更ウィンドウ）以下を使用してビューポートの高さを決定する使用することができます

var height = $(window).height() 

あなたはあなたのdivと似たようなことをすることができ、それがどれほど大きくなければならないかを決めることができますあなたはそれに応じてあなたのdivの高さを設定することができます。

set div height using jquery (stretch div height)

：

$('#divName').height(<new height>) 

ほとんど追加のコードと助けのために同じ質問である次のスタックオーバーフローを参照してください。