увеличение ДИВ как содержание в нем увеличивается

Question

У меня есть HTML-структуру, как это:

<div id="pagewrap"> 

    <div id="header"> 
    </div> 

    <div id="content"> 

    <div id="left"></div> 
    <div id="right"></div> 

    </div> 
<div id="footer"></div> 
</div> 

Я хочу увеличить размер содержимого DIV когда либо дивы в содержательных Див увеличивается по мере того же размера, что и другие дел.

Как я могу это достичь?

Это как мой КСС:

#pagewrap 
    { 
    width: 100%; 
    height: 100%; 
    } 

    #header{width: 100%;height:97px;position:relative;} 

    #left{position:absolute;left:0px;width:20%;background-color:#1C2326;} 

    #right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;} 

    #footer{clear:both;height: 80px;background-color:#72D27C;} 

Answer 1

Если вы хотите обертка быть затронуты размерами содержимое, вы не можете использовать position: absolute во внутренних дивы. Попробуйте плавающие их вместо (и добавить overflow: hidden в контейнер, чтобы очистить внутренние поплавки):

#pagewrap { width: 100%; height: 100%; } 
#content { overflow: hidden; } 
#header { width: 100%; height: 97px; position:relative; } 
#left { float: left; width: 20%; background-color: #1C2326; } 
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; } 
#footer { height: 80px; background-color: #72D27C; } 

http://jsfiddle.net/h4hbx/

Answer 2

Я думаю, может быть, это fiddle ближе к тому, что вы имели в виде. Вы можете позволить левому div (статическое положение, без поплавка) установить высоту содержимого, а затем привязать верхний и нижний правый div к содержимому div. По мере того, как листья растут, контент растет, и право привязано к содержанию, давая вам эффект, который вы хотите. Однако это асимметрично - если вы хотите, чтобы либо div заставлял другого следовать за ним, это еще одна проблема.

CSS:

html, body { 
    height: 100%; 
} 
#pagewrap { 
    width: 100%; 
    height: 100%; 
} 
#content { 
    position: relative; 
} 
#header { 
    width: 100%; 
    height:97px; 
} 
#left { 
    left:0px; 
    width:20%; 
    background-color:#1C2326; 
    color: #fff; 
    top: 0; 
} 
#right { 
    position:absolute; 
    right:0px; 
    width:80%; 
    background-color:#2D3538; 
    color:#fff; 
    bottom: 0; 
    top: 0; 

} 
#footer { 
    clear:both; 
    height: 80px; 
    background-color:#72D27C; 
}