Вытягивание контента по родителю

[prowoke]

Здравствуйте. Есть такая вот структура:

	<div id="middle">

		<div id="container">
          <div class="topangleline"></div>
        	<div id="sideLeft">
	          <div class="leftcontent">
              <div class="leftshadow"></div>
              <div class="rightshadow"></div>
                <div class="papirus"><img src="/img/papirus.gif" alt="" /></div>
                <div class="leftmenu">
                  <ul>
                    <li><img src="/img/usor.png" alt="" /></li>
                      {leftmenu}
                    <li><img src="/img/usor.png" alt="" /></li>
                  </ul>
                </div>
            </div>
            <div class="leftbottom"></div>
		    </div><!-- .sidebar#sideLeft -->
			<div id="content">
		        {text}
			</div><!-- #content-->

		</div><!-- #container-->

	</div><!-- #middle-->

И вот такой вот css:

div#content {
  width: 650px;
  background-color: #ffe0b0;
  margin-right: 0px;
  margin: 0 0 0 264px;
  padding: 0;
  height: 100%;
  padding:  0 35px;
}
div#middle {
	width: 100%;
	position: relative;
	height: 100%;
	min-height: 100%;
}
div#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100%;
}

И такой вот скриншот:

http://s1.ipicture.ru/uploads/20120205/7SUQl8qT.png

Я хочу, чтобы контент растягивался ровно до футера, а то он соединяется цветами с футером, если только в самом контенте находится много элементов, которые его растягивают. Помогите, пожалуйста. Я думал height: 100% заставит его растягиваться. Оказывается, что нет.

Edited February 5, 2012 by prowoke

[moron]

удалите мой глупый коментарий, я уверен что он не сможет помочь...Просто сначала написал, а потом уже подумал и посмотрел на скрины.

min-height: 100%;

Edited February 5, 2012 by moron

[Switch74]

не пробовал

html,body{height:100%;}

[prowoke]

Попробовал все 2 варианта. Не помогает. У меня и так body,html height: 100% стоит.

[Switch74]

у тебя div#middle имеет height: 1%;

[prowoke]

у тебя div#middle имеет height: 1%;

Убрал. Ничего не поменялось.

[Switch74]

попробуй разобраться с этим возможно сможешь переделать под свои нужды

<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
        position:relative;
        margin:0px auto;
        width:1000px;
        min-height:100%;
        overflow:hidden;}
#content{
        margin:0px 0px 0px 310px;
		min-height:100%;
        background:#ddd;}
#left{
        position:relative;
        float:left;
        padding-bottom:30px;
        width:300px;
        background:#999;}
#footer{
        position:absolute;
        left:0px;
        right:0px;
        bottom:0px;
        height:30px;
        background:#bbb;}
</style>
<div id="body">
        <div id="left">
                left
        </div>
        <div id="content">
                content
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                content
        </div>
        <div id="footer">
                footer
        </div>
</div>

[prowoke]

div#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
    background-image: url(/img/bg.gif);
}

Я вот такую мелочь не заметил. Тему можно закрывать.