CSS min-height ne fonctionne pas correctement
Voici la situation, j'ai ce code html:
<div id='main'>
<div id='menu'>
Menu Items Here
</div>
<div id='cont'>
Content Here
<div id='footer'>Some Footer</div>
</div>
</div>
CSS ici:
html, body {
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}
#main{
overflow : auto;
background-color: yellow;
width : 100%;
min-height : 100%;
}
#menu {
background-color: red;
float : left;
width : 300px;
}
#cont {
margin-left : 300px;
float : right;
background-color: orange;
width : 100px;
min-height : 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
Ce que je veux faire est fondamentalement #cont div doit avoir un min hauteur de 100% (si j'ai de petites de contenu), mais peuvent s'étendre si avoir plus de contenu.
Toute aide serait appréciée.
Remarque: La largeur de la taille est juste temporaire pour l'instant.
Merci!
source d'informationauteur Eddie
Vous devez vous connecter pour publier un commentaire.
Cela peut fonctionner:
Essayer cette http://jsfiddle.net/W6tvW/2/
Si vous voulez le pied de page de rester en bas:
vous utilisez min-height:100%, ce qui signifie "prendre de la hauteur minimale de cette boîte est à la hauteur de celui-ci"
vous serait mieux en utilisant une valeur de pixel (par exemple, faire #menu et #cont min-height:400px;)
si vous souhaitez les rendre à la fois la hauteur de la plus haute, ensuite, vous aurez besoin de quelques jquery: