兒童DIV用可滾動內容填充剩餘高度

我試圖設置一個菜單div A，並在其下面有內容容器div B。它們都嵌套在父母div C中。當div B內的內容高於div B本身時，則需要在div B上出現滾動條。兒童DIV用可滾動內容填充剩餘高度

。

說我遇到的主要問題是div A有一個未知的高度和內容通過JavaScript添加和刪除在運行時，我想div B填補，而其餘家長的高度可隨時更改保持其內容的可滾動性。

我正在尋找一個CSS解決方案，因爲我正在處理的應用程序已經是JS沉重的，我希望避免增加更多的膨脹。

的簡化版本，我的問題： https://jsfiddle.net/uf3frdjv/

來源

2016-01-08 pra1998

能否請您爲我們提供的CSS和HTML代碼？ –

你可以請小提琴嗎？並在那裏複製你的代碼？所以我們有一些代碼可以與... –

我很喜歡，但它是大型企業應用程序的一部分，所以實際的HTML/CSS是瘋狂的巨大。如果有幫助，我可以簡化版本的問題？ – pra1998

使用Flexbox將能解決你的問題。

一個簡單的例子：

.C { 
    display: flex; /* this enables flex layout */ 
    flex-direction: column; /* child divs are placed in column */ 
} 
.A { 
    flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */ 
} 
.B { 
    flex: 1 1 auto; /* div B should fit the remaining space */ 
    overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */ 
}

對於一個活生生的例子，看到這個fiddle

來源

2016-01-08 03:29:15 rhgb

這正是我一直在尋找的，謝謝！ – pra1998

可以使用的display:flex組合flex-direction: column;設置爲父div#C，並且overflow-y:scroll設置爲底部div#B實現它。

你也想設置爲height:100%向div#B填補空白時div#A和div#B高度之和是不夠的，以填補div#C高度，就像這樣：

JS Fiddle

#C { 
 
    width: 300px; 
 
    height: 400px; 
 
    border: 2px solid tomato; 
 
    display:flex; 
 
    flex-direction: column; 
 
} 
 
#A { background-color:skyblue; } 
 
#B { height:100%; background-color:orange; overflow-y:scroll; }

<div id="C"> 
 
    <div id="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi odit cumque animi cum recusandae reprehenderit labore incidunt necessitatibus. lorem</div> 
 
    <div id="B"> 
 
    <div id="D"> 
 
     Dragée topping pastry cake liquorice. Oat cake cake dessert brownie caramels candy muffin. Jelly jelly beans gummies sugar plum oat cake. 
 
     <br> 
 
     <br>Fruitcake croissant candy canes gingerbread fruitcake brownie donut cookie. Donut gummi bears biscuit wafer ice cream sesame snaps. Tart ice cream biscuit jelly croissant candy. Marshmallow jelly tiramisu carrot cake apple pie cupcake dragée pudding 
 
     lollipop. 
 
     <br>Ice cream bear claw pastry powder danish. Oat cake chocolate cake sesame snaps topping bear claw caramels cake tiramisu. Icing muffin bonbon dragée sweet roll jujubes danish. Macaroon cake candy chupa chups bear claw chocolate bar muffin cookie. 
 
     <br> 
 
     <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam similique eligendi iste laudantium nisi eius velit odio dolores sit autem, quod corrupti quisquam tenetur doloribus, commodi obcaecati, fugit at nam?</div> 
 
    </div> 
 
</div>

Resources：

來源

2016-01-08 03:29:32

謝謝！這工作，但@rhgb解決方案更進一步，並刪除滾動條時，內容不夠高。我非常喜歡你使用的食物Lorem Ipsum。你從哪裏得到它？ – pra1998

歡迎你，其實我也喜歡'overflow-y：auto'，對於這樣的ipsum檢查http://www.cupcakeipsum.com/和http://www.coffeeipsum.com/ –

兒童DIV用可滾動內容填充剩餘高度

回答

相關問題