Javascript - 展開div以適應內容，但不會展開容器外部

使用CSS可以做到這一點嗎？考慮下面的HTML：Javascript - 展開div以適應內容，但不會展開容器外部

<div class="main-container"> 
    <div class="left"> 
     ... 
    </div> 
    <div class="right"> 
     <div class="top"> 
      ... 
     </div> 
     <div class="bottom"> 
      dynamic content 
     </div> 
    </div> 
</div>

我想bottom滾動，如果它溢出頂部和main-container底部之間的空間。

如何在不指定bottom的高度的情況下完成此操作？

如果可能，我不希望在其他元素上指定高度。它現在不正確，但top也可以具有動態內容。

上面的HTML可以改變，但是必要;我需要的是左邊欄，右邊欄和右邊欄底部滾動的最終結果，如果其上下文超出主容器中的可用空間。

來源

2011-07-12 taz

你嘗試溢出：滾動.bottom？ –

設置overflow屬性不會生效，除非您還指定了相同元素的高度。我專門尋找一種方法來模擬.bottom上的溢出：自動，而不必指定.bottom的高度。我想要的是動態擴展.bottom，可能帶有動態生成的.top，如果它超出了.main-container的範圍，它會自動滾動。從我可以告訴，可能沒有一個純粹的CSS（非Javascript）解決方案。 – taz

最後，您必須爲元素指定某種限制（height或max-height），以便知道內容是否超出了限制。

設置好這些尺寸後，overflow:auto;會在需要時顯示滾動條。

來源

2011-07-12 20:27:51

希望這是你在找什麼：

<div class="main-container"> 
    <div class="left" style="float: left; width:33%"> 
     ... 
    </div> 
    <div class="right" style="float: right; width:66%"> 
     <div class="top" style="height: auto;"> 
      ... 
     </div> 
     <div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;"> 
      dynamic content 
     </div> 
    </div> 
</div>

來源

2011-07-12 20:28:36 6nagi9

此解決方案不起作用，因爲我不想指定.bottom的高度。出於我的目的，指定最大高度會產生與指定高度相同的缺點，即我正在尋找一種方式，使底層不必「知道」任何特定的高度測量值。另外，將.bottom的最大高度設置爲.main-container的高度時，如果.top + .bottom> .main-container的高度爲.top的高度，則將.bottom推出.main-container的底部。 – taz

Javascript - 展開div以適應內容，但不會展開容器外部

回答

相關問題