jQuery 또는 CSS를 사용하여 div 높이와 너비를 자동 조정 (늘이기)하는 방법

Question

아래와 같이 ID가 A, B, C 및 D 인 4 개의 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 사이에서 Divs B와 C를 늘리고 싶습니다. div B와 오른쪽 마진 사이에 Div c를 늘리고 싶습니다. 따라서 페이지에는 스크롤 막대와 빈 공간이 없습니다.

내 예상 레이아웃은

가 어떻게이 가능하여 JQuery와/CSS를 만들 수 아래처럼 ?? 누구나 솔루션을 가지고 pls 나에게 바이올린/데모 줄 ?? 사전에

덕분에 ... :)

는

그림에 대한

Answer 1

글쎄, 요구에도 불구하고, 난 여전히 당신이 원하는 것을 완전히 확실하지 않다.

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/

Answer 2

일을 blasteralfred!

jQuery가 필요하다고 생각하지 않습니다. 구체적인 예를 물어 보았지만 Google에 여러 가지 유용한 자료가 있습니다. 특히 여기에 유체 레이아웃 '을 찾아보십시오 : http://css-tricks.com/the-perfect-fluid-width-layout/ 여기

Answer 3

JQuery와'애니메이션 '의 예입니다

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