帶有單獨固定，可滾動內容區域的CSS佈局

在我的CSS佈局中努力實現我所需的功能。帶有單獨固定，可滾動內容區域的CSS佈局

基於這個基本結構https://jsfiddle.net/606ep8g7/6/。我試圖讓下面彙總到一起：

<body> 
    <div id="A"> 
     <div id="A1"> 
     </div> 
     <div id="A2"> 
     </div> 
     <div id="A3"> 
     </div> 
    </div> 
    <div id="dragbar"></div> 
    <div id="B"> 
    </div> 
</body>

2容器：＃A和＃B用div來調整它們彼此相對。
#A是固定的（無滾動），並且包含3周的div：＃A1這是一個固定的標識，＃A2其爲導航欄，和＃A3這對於容器一個jstree列表。

＃A1是固定的高度，而＃A2包裹它的內容必須始終可見。這工作正常。

我試圖讓＃A3有固定＃A元素中自動滾動條，而在同一時間＃B實現滾動條時，內容是推動窗外，我似乎無法讓這些工作。

我只是找不到合適的組合，以使所有這些工作正常。如果我製作＃A3位置：絕對，我可以得到滾動條，但它不再相對於＃A2的動態調整。但是當相對時，＃A3不會展開到窗口的底部，也不會自動將滾動條放在內容溢出處。我無法修復DIV的高度，因爲它是動態填充的，需要使用＃A2進行調整。有任何想法嗎？

來源

2015-03-03 stacked

做你嘗試＃A3的高度設置爲100％ – 2015-03-03 00:57:02

這將＃A3S高度父高度的100％，我相信，下＃A1和＃A2父不剩餘空間。如果您在小提琴中嘗試它，＃A3會滾動到可見窗口的下方，但您看不到最下面的內容。 – stacked 2015-03-03 02:07:33

display:flex並在divflex:1 + overflow是滾動的可能是一個解決辦法：https://jsfiddle.net/606ep8g7/7/

來源

2015-03-03 00:57:59

https://jsfiddle.net/GCyrillus/606ep8g7/9/ a2增加 – 2015-03-03 01:38:01

這很好。我無法弄清楚如何讓Flexbox在這種情況下工作;但是這是一個簡單的修改！謝謝！是否有任何方法在其自己的容器中包含#B x滾動條，而不是跨越整個瀏覽器？ – stacked 2015-03-03 17:41:14

@堆砌得很好，只是使用相同的方法:) https://jsfiddle.net/GCyrillus/606ep8g7/10/並放置位置不夠靈活 – 2015-03-03 21:42:32

由於您使用JavaScript來動態改變寬度，你可以做同樣的高度。

$('#A3').css('height', $('#A').outerHeight() - $('#A1').outerHeight() - $('#A2').outerHeight())

我使用javascript設置基於其他兩個元素高度的＃A3的初始高度。同樣，＃A3的高度在鼠標移動時發生變化。這不是一個純粹的CSS解決方案，但是由於您使用JS來操縱寬度，所以沒有理由不對高度做同樣的事情。

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

來源

2015-03-03 02:33:16

這將是一個簡單的問題，如果＃A2不需要保存內容內聯和包裝。即使不依賴片狀'calc'函數，我可以將＃A3設置爲絕對值，只需指定固定的「頂部」和「底部」位置即可。但在這種情況下（基於＃A2的必要屬性），這不是一個簡單的解決方案。不過謝謝你的想法。 – stacked 2015-03-03 04:38:16

實際上這仍然無法正常工作，因爲它正在低於所需要的百分比。100％ – 2015-03-03 15:11:44

我使用JS修改了我的解決方案。請看小提琴。 – 2015-03-03 16:00:33

帶有單獨固定，可滾動內容區域的CSS佈局

回答

相關問題