如何使用jQuery或CSS自动调整（拉伸）div高度和宽度 [英] How to auto adjust (stretch) div height and width using jQuery or CSS

问题描述

我有4个ids A，B，C和D，如下所示：

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

Div A& D具有固定宽度&高度。 Div B具有固定宽度。我想要的Div B的高度和高度+ Div C的宽度自动计算。我想在div A和​​D之间拉伸Div B和C。同时我要在div B和右边距之间拉伸Div c。

我的预期布局如下

img src =https://i.stack.imgur.com/loi55.jpgalt =enter image description here>

如何使这可能使用jquery / css？

提前感谢... ：）任何人都有一个解决方案，

blasteralfred

解决方案

不完全确定你想要什么。

我不认为你必须使用jQuery。这是怎么回事？

<$> p $ p> #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/

I have 4 divs with ids A, B, C and D, like below;

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

Div A & D have fixed width & height. Div B has fixed width. I want the height of Div B and height + width of Div C calculated automatically. I want to stretch Divs B and C in between div A and D. Also I want to stretch Div c in between div B and right margin. The page thus wont be having any scroll bars and empty space.

My expected layout is like below

How can I make this possible using jquery / css?? Anybody has a solution and pls give me a fiddle / demo ??

Thanks in advance...:)

blasteralfred

解决方案

Well, despite asking, I'm still not entirely sure what you want.

I don't think you have to use jQuery for it either. How's this?

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>

---

Or maybe you want it like this instead? http://jsfiddle.net/thirtydot/4BR9s/1/

这篇关于如何使用jQuery或CSS自动调整（拉伸）div高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！