Как заставить div растягиваться вместе с телом?

Question

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

У меня есть эта страница, которая закрывает форму личного профиля. Эта форма заключена в div контейнера страницы и довольно длинная, поэтому для ее отображения требуется главная полоса прокрутки. В нижней части страницы есть раздел нижнего колонтитула, где отображаются заявления об авторских правах.

Моя проблема в том, что я не могу найти способ заставить контейнер моей страницы растягиваться вместе с элементом body. Я применил высоту: наследовать к этому div, но все же он отказался растягиваться, чтобы он охватывал до границы раздела нижнего колонтитула Теперь есть большой разрыв между нижним колонтитулом и тем div, заполненным цветом фона тела. Вот скриншот для лучшего понимания.

ScreenCap

/*Form container*/  
#form_container{   
 width: 600px;  
 background-color:#FDAE80;  
 margin-top: 15px;  
 margin-left: 110px;  
 padding-top: 10px;  
 padding-left: 20px;  
 padding-right: 20px;  
 padding-bottom: 10px;  
}  

body{   
 margin-top: 0px;  
 margin-bottom: 0px;  
 height: 100%;   
 background-color: #683468;    
}  

/*Page Container*/  
div.mcontainer{   
 width: 1032px;  
 height: inherit;  
 background-color: #ffffff;  
}  

/*Footer Section*/  
div.footer{  
 width: 1032px;  
 height: 80px;  
 border-top: 1px solid #683468;  
 margin-top: 10px;  
 text-align: center;  
 font-family: Arial;  
 font-size: 12px;  
 color: red;  
 position: relative;  
 bottom: 0px;  
 background-color:black;  
}  

Любая помощь будет оценена.

РЕДАКТИРОВАТЬ Просто чтобы уточнить, нижний колонтитул находится внутри контейнера страницы div. Вот мой html - htm

Answer 1

Попробуйте добавить очищающий элемент в качестве последнего элемента в контейнере вашей страницы после всех элементов формы. Может быть <br clear="all" /> или div со стилем clear:both.

Лучшая идея - убрать height: inherit; из вашего стиля mcontainer. Это исправило это для меня.

Answer 2

Может быть, вам стоит попробовать добавить: clear: both в класс нижнего колонтитула

Answer 3

У меня была такая же проблема, теперь я использую java-скрипт (jQuery) для ее решения.

В моем случае это был div для строки меню, и я вычислил высоту из основного контейнера плюс высоту из заголовка.

$(document).ready(function(){
    var h = $(".main").height() + $(".main").position().top
    $(".lmenu").css({height:h+"px"})
    $(".rmenu").css({height:h+"px"})
});

Сейчас, кажется, имеет смысл использовать высоту тела:

$("body").height()

Если есть версия без javascript, было бы интересно узнать. Но между тем это может быть обходной путь.

Answer 4

Если в вашем контейнере есть плавающие элементы, попробуйте поместить clear-both-div в конец контейнера div:

<div id="mcontainer">
    ...code

    <div style="clear:both;"></div>

</div>

Answer 5

попробуйте добавить html к высоте:

html, body {
    height: 100%;
}

как обсуждено в Списке отдельно: http://www.alistapart.com/articles/footers/

Answer 6

Попробуйте использовать переполнение: скрыто; на div.mcontainer.