J'ai une mise en page avec deux colonnes - une div
gauche et une div
droite.
La div
de droite a une background-color
grise, et j'ai besoin qu'elle s'étende verticalement en fonction de la hauteur de la fenêtre du navigateur de l'utilisateur. Actuellement, la couleur d'arrière-plan s'arrête au dernier élément de contenu de cette subdivision.
J'ai essayé height:100%
, min-height:100%;
, etc.
Tu ne mentionnes pas quelques détails importants comme.. :
Voici une possibilité :
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}
#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px; // must agree with previous width
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>
Il existe de nombreuses variations sur ce point, selon les colonnes qui doivent être fixes et celles qui sont liquides. Vous pouvez également le faire avec un positionnement absolu, mais j'ai généralement trouvé de meilleurs résultats (notamment en termes de cross-browser) en utilisant des flotteurs à la place.
Ajoutez min-height : 100%
et ne spécifiez pas de hauteur (ou mettez-la en automatique). Cela a fait l'affaire pour moi :
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}