根據內容動態更改div高度，並在溢出時設置垂直滾動條。

Question

我有一個div它的高度是固定的。在div裏面有兩個divs，其中高度由於divs內的內容而動態變化。

<div id="panel"> 
    <div id="layerTree"> 

    </div> 

    <div id="features"> 
     <div id="accordion_equip"></div> 
     <div id="accordion_equip"></div> 
    </div> 
</div> 

裏面features div有兩個divs有手風琴。無論何時當我們點擊該手風琴時，由於手風琴的數據features div應該有一個垂直滾動條。

但是，當我們爲features div設置固定高度時會出現垂直滾動條。但我無法設置固定高度，因爲layerTree div高度也會根據裏面的內容而變化。

那麼，如何解決這個問題呢？

CSS：

#panel { 
    width: 20%; 
    height: 100%; 
    float: right; 
    position: relative; 
    top: 5px; 
} 

#features { 
    height: 365px; 
    overflow-y: auto; 
} 

可惜我不能附上由於安全限制當前UI的任何圖像。

Answer 1

我用JS修復了它。

  fixHeight = function() { 
       var p = $('#layerTree').outerHeight(); 
       var featureHeight = 555 - p; 
       $("#features").css("height", featureHeight); 
      }; 

Answer 2

更新CSS

#features { 
    min-height: 365px; 
    overflow-y: auto; 
} 

Answer 3

您可以爲此設置內容min-height。因此，當內容高度與min-height不一致時，根據您的內容高度自動執行height。

#features { 
    min-height: 365px; 
    overflow-y: auto; 
} 

如果你想顯示垂直滾動條，那麼你可以設置下面的css規則。

#features { 
    max-height: 365px; 
    overflow-y: scroll; 
}