響應的方式來獲得一個div填滿其父母

我有兩個div包含在一個包裝，其大小是相對於身體的高度。其中一個div具有固定的高度，另一個應該填充包裝div，並讓溢出的內容滾動（僅限內部div）。響應的方式來獲得一個div填滿其父母

通常我計算通過jQuery「#contactlist」的高度，但這次我需要的頁面響應。當我調整瀏覽器窗口的大小時，「#contactlist」卡在其定義的高度。每次身體大小發生變化時，我是否必須重新計算身高？還是有辦法讓它在CSS中完成？

謝謝！

2012-04-17 johnny

哦，是的，正好。 – johnny 2012-04-17 17:06:46

我想我不明白的是，它似乎希望容器（#wrapper）具有固定的高度（根據您的示例），但希望內容根據瀏覽器大小更改大小？ – 2012-04-17 17:08:15

靈活的是#wrapper的大小。它的身高是身體的80％（我無法在jsfiddle中重新創建它）。當我現在調整瀏覽器的大小時，#wrapper的高度也會改變，因此#contactlist也應該縮小。 – johnny 2012-04-17 17:15:27

我還不能肯定，但我認爲你要使用一些絕對定位。

JSFiddle Demo

您還可以設置overflow: auto;和滾動條將不會顯示，除非必要的。

來源

2012-04-17 17:15:04

更新了，固定爲jsFiddle IFrame的80％。 – 2012-04-17 17:21:52

#wrapper { width: 200px;border: 4px solid black; } 
#header { height: 50px; border: 2px solid red; } 
#contactlist { overflow: visible; border: 2px solid blue; }

拆下包裝高度和使用overflow:visible;

我不知道這是否是你想要的

的jsfiddle demo

來源

2012-04-17 17:06:44 Ghokun

沒有抱歉，包裝的高度是相對於身體的高度。 #contactlist應滾動。 – johnny 2012-04-17 17:12:56

對不起，問題不清楚。 Erik給出了正確的答案我猜 – Ghokun 2012-04-17 17:17:40

這裏是jQuery的溶液與

#contactlistCSS高度調節：

#wrapper { width: 200px; height: 400px; border: 4px solid black; } 
#header { height: 50px; border: 2px solid red; } 
#contactlist { overflow: scroll; height: 344px; border: 2px solid blue; }

（僅修改的聯繫人列表的高度）

的jQuery碼（置換的一個）：

h = $('#wrapper').height() ; 

windowh = $(window).height(); 

$(window).resize(function(){ 

    var newh = h + ($(this).height() - windowh); 
    $('#wrapper').height(newh); 
    $("#contactlist").height(newh-56); //56 = 50 for header + 6 for border 

});

使用此代碼，與窗口大小調整同時，您可以通過滾動來增加或減少#wrapper和#contactlist的高度。

小提琴演示：http://jsfiddle.net/ajp9h/

來源

2012-04-17 18:52:03

也只有CSS方式，你可以通過在'％'而不是'px'中使用高度單位來獲得這個，必須同時使用包裝和聯繫人列表高度百分比，可以調整它們的高度最適合，然後嘗試窗口調整大小。 – 2012-04-17 19:04:00

響應的方式來獲得一個div填滿其父母

回答

相關問題