Tengo un diseño con dos columnas - un div
izquierdo y un div
derecho.
El div
derecho tiene un background-color
gris, y necesito que se expanda verticalmente dependiendo de la altura de la ventana del navegador del usuario. Ahora mismo el background-color
termina en el último contenido de ese div
.
He probado con height:100%
, min-height:100%;
, etc.
No mencionas algunos detalles importantes como:
He aquí una posibilidad:
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>
Hay muchas variaciones de esto dependiendo de qué columnas necesitan ser fijas y cuáles son líquidas. Usted puede hacer esto con el posicionamiento absoluto también, pero por lo general he encontrado mejores resultados (sobre todo en términos de cross-browser) utilizando flotadores en su lugar.
Añade min-height: 100%
y no especifiques una altura (o ponla en automático). A mí me ha funcionado totalmente:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}