HTML/CSS：兩個塊divs一個滾動和一個父項限制

Question

首先，我是不是正在尋找Javascript解決方案。

我還喜歡解決方案不是使用CSS3。如果可能的話（這是爲了支持）

這可以水平完成。如xHTML/CSS: How to make inner div get 100% width minus another div width

我想知道是否有類似的東西可以垂直實現。

我知道，CSS3解決方案可能能夠使用calc（）;運營商。不過，我正在尋找一個更舊的學校CSS3前的解決方案，所以我可以得到儘可能多的支持。

假設父容器的尺寸是由用戶通過調整大小設置的。

There are two inner divs, one above the other. 
- one is as high as its content 
- one fills the rest of the height and scrolls if overflows. 

滾動容器位於不斷增長的容器上方。

這，解釋說簡單一點：

<div id="parent"> 
    <div id="scroll"> 
     content<br/>content<br/>content<br/>content<br/>content<br/> 
     content<br/>content<br/>content<br/>content<br/>content<br/> 
     content<br/>content<br/>content<br/>content<br/>content<br/> 
     content<br/>content<br/>content<br/>content<br/>content<br/> 
     content<br/>content<br/>content<br/>content<br/>content 
    </div> 
    <div id="grow"> 
     as this content grows, 
     the above content above gets smaller, 
     but is scrollable, 
    </div> 
</div> 

#parent{ 
    height : user defined in pixels/can randomly change 
    width : user defined in pixels/can randomly change 
} 

#grow{ 
    width : as wide as parent 
    height : as_height_as_contents 
} 

#scroll{ 
    width : as wide as parent 
    height : whatever height is remaining 
    overflow : auto /* scroll if necessary */ 
} 

所以這可能嗎？

Answer 1

你可以不JS或鈣最接近的事是這樣的

#parent{ 
    height : 300px; /* User defined in pixels/can randomly change */ 
    width : 500px; /* User defined in pixels/can randomly change */ 
} 
#scroll{ 
    height : 100%; 
    overflow:auto; 
} 

Demo

另一種選擇是使用Flexbox的，但具有比CSS3的支持較少

否則這是不可能的

Answer 2

這是不可能的。

如果你對我的承擔是由於創建新行的文本。爲了處理這個問題，滾動div必須設置爲一個大小，例如px或％。很明顯px會阻止它調整大小，所以它必須是％。將其設置爲100％會使整個盒子佔據整個盒子，並將其設置爲50％將簡單地將其設置爲盒子的一半。它仍然不夠動態。

爲什麼div盒需要設置爲特定的大小？因爲如果設置爲高度，txt只會導致div框展開：auto;即使我們將盒子設置爲100px，文本仍然會覆蓋DIV，除非我們設置了一個溢出自動，因爲我們已經失敗了一個固定大小的溢出自動，這實際上並不相關。