Cómo ajustar automáticamente (estirar) altura y ancho de div usando jQuery o CSS

Question

Tengo 4 divs con los identificadores A, B, C y D, como a continuación;

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

Div A & D han fijado anchura & altura. Div B tiene ancho fijo. Quiero que la altura de Div B y la altura + ancho de Div C se calculen automáticamente. Quiero extender Divs B y C entre div A y D. También quiero estirar Div c entre div B y el margen derecho. Por lo tanto, la página no tendrá barras de desplazamiento ni espacio vacío.

Mi diseño es esperado como a continuación

¿Cómo puedo hacer esto posible utilizando jQuery/css ?? ¿Alguien tiene una solución y me dan un violín/demo?

Gracias de antemano ... :)

blasteralfred

Answer 1

Pues bien, pese a que, aún no estoy del todo seguro de lo que quiere.

No creo que tenga que usar jQuery tampoco. ¿Cómo es esto?

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> 

---

O tal vez quiere como este en su lugar? http://jsfiddle.net/thirtydot/4BR9s/1/

Answer 2

1 para el diagrama!

No creo que necesite jQuery para esto. Sé que solicitó un ejemplo específico para usted, pero hay varios buenos recursos que aparecieron en Google. Busque 'diseño fluido' y concretamente aquí: http://css-tricks.com/the-perfect-fluid-width-layout/

Answer 3

Aquí es un ejemplo de jQuery 'animado':

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