如何使用jQuery或CSS自動調整（拉伸）div高度和寬度

我有4個div，ID爲A，B，C和D，如下所示;如何使用jQuery或CSS自動調整（拉伸）div高度和寬度

<div id="A"></div> 
<div id="content"> 
    <div id="B"></div> 
    <div id="C"></div> 
</div> 
<div id="D"></div>

股利甲& d具有固定寬度&高度。 Div B具有固定的寬度。我想自動計算Div B的高度和Div C的高度+寬度。我想在Div A和D之間展開Div B和C，並且我想在Div B和右邊距之間展開Div c。頁面因此不會有任何滾動條和空白空間。

我預計的佈局就像下面

enter image description here

我怎樣才能讓這一切成爲可能的使用jQuery/CSS？任何人都有解決方案，請給我一個小提琴/演示？

在此先感謝... :)

blasteralfred

來源

2011-04-06 blasteralfred Ψ

整體結構的高度是固定的，還是應該擴展到父元素的100％高度？你需要支持哪些瀏覽器？ – thirtydot 2011-04-06 13:28:14

我專注於Firefox，但我認爲，如果我使用jquery計算長度，我可以擁有跨瀏覽器支持。身高：100％將無法在瀏覽器中工作 – 2011-04-06 13:52:18

好了，儘管問，我還沒有完全知道你想要什麼。

我不認爲你必須爲它使用jQuery。這個怎麼樣？

Live Demo

CSS：

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 
#top, #left, #right, #bottom { 
    position: absolute 
} 
#top { 
    top: 0; 
    width: 100%; 
    height: 50px; 
    background: #00b7f0 
} 
#left { 
    top: 50px; 
    width: 50px; 
    bottom: 50px; 
    background: #787878 
} 
#right { 
    top: 50px; 
    left: 50px; 
    right: 0; 
    bottom: 50px; 
    background: #ff7e00 
} 
#bottom { 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
    background: #9dbb61 
}

HTML：

<div id="container"> 
    <div id="top"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="bottom"></div> 
</div>

或者，也許你想讓它這樣呢？ http://jsfiddle.net/thirtydot/4BR9s/1/

來源

2011-04-06 14:00:37 thirtydot

我想容器填充屏幕，即寬度和高度100％ – 2011-04-06 14:05:55

@blasteralfred：我預測可能是這種情況。查看我答案底部的第二個版本。 – thirtydot 2011-04-06 14:10:09

正是我在找的..謝謝..'：）' – 2011-04-06 14:15:58

+1的圖！

我不認爲你需要這個jQuery。我知道你爲你提出了一個具體的例子，但是在Google上出現了很多好的資源。查找「流體佈局」，具體位置：http://css-tricks.com/the-perfect-fluid-width-layout/

來源

2011-04-06 13:06:40 n8wrl

這不會工作，如果div是空的...不工作.... – 2011-04-06 13:50:04

這裏是jQuery的「動畫」的一個例子：

$('your_selector').animate({ 
'height':'<your_calculated_height>', 
'width':'<your_calculated_width>' 
},'slow');

來源

2011-04-06 13:07:25 thecodeparadox

如何使用jQuery或CSS自動調整（拉伸）div高度和寬度

回答

相關問題