如何使用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高度和宽度

回答

相关问题