jquery：自動調整絕對位置的子div

我有使用2個div的以下標記。 #child div已設定位置：絕對;jquery：自動調整絕對位置的子div

+------------------------------+ 
| +----------+    | 
| | #child |    | 
| +----------+    | 
|        | 
|        | 
|        | 
+------------------------------+

我想通過代碼來改變孩子的高度，使得它總是自動調整大小以它的容器是這樣的：

+------------------------------+ 
| +----------+    | 
| | #child |    | 
| |   |    | 
| |   |    | 
| |   |    | 
| +----------+    | 
+------------------------------+

是有它的默認功能？ THX

來源

2009-11-05 Fuxi

jQuery是沒有必要爲這一點。純CSS可以做到這一點。看到我的答案。 – cletus 2009-11-05 13:53:31

與css唯一的問題是，100％的元素高度不適用於所有瀏覽器 – 2009-11-05 16:08:56

100％的頁面高度在某些版本的IE瀏覽器中存在問題。除此之外，CSS比JavaScript更適合這樣做，並且會帶來更多*更好的用戶體驗。如果有什麼，你應該使用CSS和Javascript/jQuery在少數情況下CSS不能工作（你可以檢測到）。 – cletus 2009-11-06 00:54:33

嘗試;

$('#child').height($('#child').parent().height());

這假定你沒有填充和你的外部div的邊界。如果你這樣做，你需要在某些瀏覽器中將它們從高度處取下來以確保它們匹配。

來源

2009-11-05 13:31:19

<div id="parent"> 
    <div id="child"></div> 
</div>

有：

#parent { position: relative; background: red; height: 500px; width: 700px; } 
#child { position: absolute; background: yellow; height: 80%; top: 10%; bottom: 10; left: 100px; width: 300px; }

注：孩子的身高是相對的（80％），以家長的高度，無論你父的高度設置或動態調整它會改變孩子的身高，但是父母必須有一個明確的高度（即使它是100％），否則這將不起作用。

來源

2009-11-05 13:25:45 cletus

嘗試是這樣的（粗略的估計，按需要調整）

$('#child').css('left', '20%').css('top','10%').css('height','80%').css('width', '30%');

來源

2009-11-05 13:29:00

這將調整相對於頁面大小的子div，而不是父div。 – 2009-11-05 13:43:47

@詹姆斯古德溫：恩？它會設置孩子相對於父div，而不是頁面。 – 2009-11-05 14:00:14

對不起，我想出於某種原因，因爲它絕對會使用頁面的高度，但實際上你是對的！ :) – 2009-12-01 20:53:29

既然你標記的使用jQuery我將爲您提供一個jQuery風格的解決方案過於：

$("#child").height($("#parent").height()*0.8);

來源

2009-11-05 13:32:06

jquery：自動調整絕對位置的子div

回答

相關問題