Div не полностью расширяется 100% высота

Question

Я хотел бы расширить левый div в нижней части страницы. Но проблема в том, что он останавливается в нижней части страницы, но когда я прокручиваю вниз, он остается вертикальным! Он не расширяется со свитком Дау :-(Любые идеи, пожалуйста,

HTML-:

<div class="menu_gauche"> 

<div class="ligne_menu_gauche"><div class="accueil"></div><div class="menu_txt">Accueil<a href="/bgladm"><span class="fullspan"></span></a></div></div> 
<div class="ligne_menu_gauche" style="background:#FAFAFA;"><div class="compte"></div><div class="menu_txt">Compte<a href="/bgladm-compte"><span class="fullspan"></span></a></div></div> 
<div class="ligne_menu_gauche"><div class="options"></div><div class="menu_txt">Options<a href="/bgladm-options"><span class="fullspan"></span></a></div></div> 
<div class="ligne_menu_gauche"><div class="notif"></div><div class="menu_txt">Notifications<a href="/bgladm-notif"><span class="fullspan"></span></a></div></div> 
<div class="ligne_menu_gauche"><div class="aide"></div><div class="menu_txt">Aide<a href=""><span class="fullspan"></span></a></div></div> 
<div class="ligne_menu_gauche"><div class="logout"></div><div class="menu_txt">Deconnexion<a href="/logout"><span class="fullspan"></span></a></div></div> 

<div class="vide_menu_gauche"></div> 
</div> 

<div class="contenu_droit"><div class="envglob_form"> 
<div class="enveloppe_form"> 
<input type="text" class="input_text_compte" value="" id="email_compte"> <span>Email</span><br>l 
</div> 

<div class="enveloppe_form"> 
<input type="password" class="input_text_compte" id="mdp_actuel"> <span>Mot de passe actuel</span><br><br> 
<input type="password" class="input_text_compte" id="mdp_1"> <span>Nouveau mot de passe</span><br> 
<input type="password" class="input_text_compte" id="mdp_2"> <span>Retappez le mot de passe</span> 
</div> 

<div class="enveloppe_form"> 
<input type="text" class="input_text_compte" id="nom_compte" value=""> <span>Nom</span><br> 
<input type="text" class="input_text_compte" id="prenom_compte" value=""> <span>Prénom</span><br> 
</div> 

<div class="enveloppe_form"> 
<input type="radio" name="sexe_compte" id="sexe_compteh" value="1"> Homme<br> 
<input type="radio" name="sexe_compte" id="sexe_comptef" value="0" checked=""> Femme 
</div> 

<div class="enveloppe_form"><select id="age"><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="2004">2004</option></select> <span>Année de naissance</span> 
</div> 

</div> 

<div class="envglob_form2"> 
<div class="enveloppe_form"> 
<div class="interets"><span>Centres d'intérêt</span></div><div class="interets" id="interets_id"><div class="interet_compte"><input type="checkbox" name="interets[]" value="1"> Actualités</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="2" checked=""> Animaux</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="3"> Art</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="4" checked=""> Automobile</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="27"> Autre</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="5"> Cinéma</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="6"> Famille</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="7"> Finance</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="8"> Formation</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="9"> Gastronomie</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="10"> Humour</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="11"> Immobilier</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="12"> Informatique</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="13" checked=""> Internet</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="14"> Jeux</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="15"> Littérature</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="16" checked=""> Maison</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="17"> Mode</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="18"> Moto</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="19"> Musique</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="20"> People</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="21"> Photographie</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="22"> Santé</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="23" checked=""> Sciences</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="24"> Sport</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="25"> Téléphonie</div><div class="interet_compte"><input type="checkbox" name="interets[]" value="26"> Voyage</div> 
</div> 
</div> 
</div> 
<div class="env_save"> 
<div id="canvasloader-container" class="loading_anim" style="display: none;"><div id="canvasLoader" style="display: block; position: absolute; top: -49px; left: -49px;"><canvas width="98" height="98"></canvas><canvas width="98" height="98" style="display: none;"></canvas></div></div> 
<div class="save" id="save_compte"></div> 
</div> 
<a href="/supprcompte" class="bouton_suppr">Supprimer le compte</a> 
</div> 

И вы найдете CSS на скрипку здесь: http://jsfiddle.net/gMNzd/

Answer 1

Единственный способ, которым я «ве удалось решить эту проблему в прошлом с немного JS * используется JQuery для упрощенного синтаксиса, но чистый JS будет работать точно так же):

$(document).ready(function(){ 
    $(".menu_gauche").height($(".contenu_droit").height()); 
}); 

Кроме того, вы будете также необходимо добавить верхнюю/нижнюю прокладку к .menu_gauche, чтобы соответствовать .contenu_droit для более совершенного выравнивания.

.menu_gauche{ 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

Обновлено скрипку: http://jsfiddle.net/gMNzd/4/

Answer 2

, если вы хотите, чтобы высота настроить соответствующим образом, вы можете добавить clearfix

<div class="left-div">your content here<div class="clearfix"></div></div> 

clearfix объяснить здесь ... проверьте ссылку
http://www.webtoolkit.info/css-clearfix.html

Answer 3

Вы можете взглянуть на http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Это описание проблемы, решение проблемы.

Другого возможным решение (более легко, на мой взгляд) использует дисплея: таблицу, дисплея: таблица-строки и дисплея: настольные ячейки. Поскольку вы фактически используете столбцы, поведение таблицы может быть именно тем, что вы ищете. Вероятно, это не работает в старых браузерах, поэтому это зависит от того, что вы хотите.

Answer 4

Измените .menu_gauche на фиксированное и дайте .contenu_droit margin-left. Пожалуйста, проверьте эту скрипку, http://jsfiddle.net/gMNzd/5/

.menu_gauche{ 
    position:fixed; /* Change the Position to fixed */ 
    top:0 ; /* Added */ 
    left: 0; /* Added */ 
    bottom: 0; /* Added */ 
.contenu_droit { 
    margin-left: 175px; 
}  

Было бы также лучше, учитывая удобство и простоту использования, как вы всегда будете иметь доступ к навигации.