Динамический размер Div

Question

Я делаю несколько HTML и сталкиваюсь с проблемой, когда мои левые и правые столбцы не масштабируются на основе содержимого внутри них, а также пропорционально остальной части страницы.

Вот мой пример: http://i.imgur.com/9vi2EK9.png

И мой CSS для каждого из дивы:

#wrapper{ 
    background:white; 
    width:1280px; 
    position:relative; 
    border: 1px solid black; /* black border */ 
    margin:auto; /* centre this div */ 
} 
#header{ 
    height:90px; 
    text-align:center; 
    padding: .5em; 
    background-color: grey; 
    border-bottom: 2px solid black; 
} 
#leftmenu{ 
    width:100px; 
    float:left; 
    font-size: 75%; 
    padding:.5em; 
    border-right:2px solid black; 
    border-left:2px solid black, 
} 
#rightmenu{ 
    width:180px; 
    float:right; 
    font-size: 75%; 
    padding:.5em; 
    border-left:2px solid black; 
    border-right:1px solid black; 
} 
#content{ 
    background-color:white; 
    margin-left:120px; 
    font-size: 80%; 
} 
#footer{ 
    clear:both; /* push footer under other divs */ 
    height: 70px; 
    background-color:white; 
    border-top:1px solid black; 
    border: 1px solid black; 
    padding-top:40px; 
    text-align:center; 
    font-size: 70%; 
} 

Как я могу убедиться, что мои дивы изменения размера на основе содержания в моей диве?

Спасибо!

Answer 1

Не видя ваш HTML, вот удар у него:

JSFiddle здесь: http://jsfiddle.net/2hf8q/

CSS

html, body { 
    height: 100%; 
} 

#wrapper { 
    height: calc(100% - 2px); /* for border */ 
} 

#leftmenu, #rightmenu { 
    height: calc(100% - 234px); /* for header, footer */ 
} 

#wrapper { 
    background:white; 
    width:100%; 
    position:relative; 
    border: 1px solid black; 
    /* black border */ 
    margin:auto; 
    /* centre this div */ 
} 
#header { 
    height:90px; 
    text-align:center; 
    padding: .5em; 
    background-color: grey; 
    border-bottom: 2px solid black; 
} 
#leftmenu { 
    width:100px; 
    float:left; 
    font-size: 75%; 
    padding:.5em; 
    border-right:2px solid black; 
    border-left:2px solid black; 
} 
#rightmenu { 
    width:180px; 
    float:right; 
    font-size: 75%; 
    padding:.5em; 
    border-left:2px solid black; 
    border-right:1px solid black; 
} 
#content { 
    background-color:white; 
    margin-left:120px; 
    font-size: 80%; 
} 
#footer { 
    clear:both; 
    /* push footer under other divs */ 
    height: 70px; 
    background-color:white; 
    border-top:1px solid black; 
    border: 1px solid black; 
    padding-top:40px; 
    text-align:center; 
    font-size: 70%; 
} 

HTML

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="leftmenu"></div> 
    <div id="content"></div> 
    <div id="rightmenu"></div> 
    <div id="footer"></div> 
</div> 

Answer 2

Вы можете сделать это, обернув #leftmenu , #content a nd #rightmenu в div, отображаемом в виде таблицы. И вывести троих детей в качестве столового-клетки:

HTML:

<div id="header">#header</div> 
<div id="wrapper"> 
    <div id="leftmenu">#leftmenu</div> 
    <div id="content">#content</div> 
    <div id="rightmenu">#rightmenu</div> 
</div> 
<div id="footer">#footer</div> 

CSS (без цвета, отступов, размер шрифта и прочее):

html, body { 
    margin: 0; 
    padding: 0; 
} 
#header{ 
    height:90px; 
} 
#wrapper { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
#wrapper > div { 
    display: table-cell; 
} 
#leftmenu{ 
    width:100px; 
} 
#rightmenu{ 
    width:180px; 
} 
#content{ 

} 
#footer{ 
    height: 70px; 
} 

И working demo.