匹配子div div最大高度與父div最大高度

Question

我有以下代碼，我不想修改換行控件的最大高度。

我希望有一種方法可以將內容高度與包裝高度相匹配，這樣我就可以滾動列表並將標題保持爲靜態。

<div class='wrap'> 
<div class='content'> 
     <div class="header"> 
      <h1>Header</h1> 
     </div> 
     <div class="list"> 
      <ul> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
       <li>item</li> 
      </ul> 
     </div> 
    </div> 
</div> 


h1 
{ 
    background:green; 
} 

.wrap 
{ 
    max-height:200px; 
    overflow-y:scroll; 
    background:blue; 
} 
.content 
{ 
    background:red; 
} 

http://jsfiddle.net/jz89u91s/

Answer 1

好學到一些新的東西。最大高度不會與我正在嘗試做的事情一起工作。我必須設定一個高度。

下面的代碼工作

http://jsfiddle.net/3r23t2nu/2/

<div id="container"> 
    <div id="head">header</div> 
    <div id="inner"> 
     <ul id="nav"> 
      <li><a href="#">1</a> 

      </li> 
      <li><a href="#">2</a> 

      </li> 
      <li><a href="#">3</a> 

      </li> 
      <li><a href="#">4</a> 

      </li> 
      <li><a href="#">1</a> 

      </li> 
      <li><a href="#">2</a> 

      </li> 
      <li><a href="#">3</a> 

      </li> 
      <li><a href="#">4</a> 

      </li> 
      <li><a href="#">1</a> 

      </li> 
      <li><a href="#">2</a> 

      </li> 
      <li><a href="#">3</a> 

      </li> 
      <li><a href="#">4</a> 

      </li> 
      <li><a href="#">1</a> 

      </li> 
      <li><a href="#">2</a> 

      </li> 
      <li><a href="#">3</a> 

      </li> 
      <li><a href="#">4</a> 

      </li> 
     </ul> 
    </div> 
</div> 

    html, body, #inner { 
    } 
    #container { 
     height: 150px; 
     border: 4px red solid; 
     padding-bottom: 30px; 
    } 
    #inner { 
     overflow-y:scroll; 
     border: 4px blue solid; 
     margin-top: 30px; 
     height: 100% 
    } 
    #head { 
     height:30px; 
     border: 4px yellow solid; 
     position: absolute; 
    } 
    #nav { 
     margin: 0; 
     border: 4px green solid; 
    } 

Answer 2

這可以使用Flexbox的完成。在以下示例中，請將.wrap div的height更改爲0到200像素之間的任意數字，並且您可以看到內容動態調整爲新高度.wrap。

活生生的例子：

h1 
 
{ 
 
    background:green; 
 
} 
 

 
.wrap 
 
{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 150px; 
 
    max-height:200px; 
 
    background:blue; 
 
} 
 
.content 
 
{ 
 
    background:red; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.list { 
 
    overflow-y:scroll; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
}

<div class='wrap'> 
 
    <div class='content'> 
 
     <div class="header"> 
 
      <h1>Header</h1> 
 
     </div> 
 
     <div class="list"> 
 
      <ul> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>