Div - Altura 100%

FedericoC · #1 (**permalink**) 06/04/2009, 17:41

Buenas.

Les comento mi problema, estoy maquetando una web, y necesito que el DIV contenedor, y un DIV lateral, tengan la altura 100% de la página, ya había podido lograrlo pero metí mano e hice un desastre.

Mi código es el siguiente:

CSS:

Código:

#contenedor
{
	border-style: solid;
	border-color: inherit;
	border-width: 0px;
	background: #fff;
	width:850px;
	height:700px;
	bottom:0;
}

#lateral
{
	
	font-family:Verdana;
	font-size:12px;
	float:left;
	width:170px;
	margin-left:0px;
	text-align:center;
	padding:0px;
	top:0;
	bottom:0;
	height:100%;
	background:gray;
}


body
{
	text-align:center;
	background:#efefef;
	margin:0px;
	padding:0px;
	height:100%;
	bottom:0;
	top:0;
}

Como verán puse la propiedad “height” en un tamaño fijo, ya que si lo pongo en 100% directamente no lo veo.

HTML:

Código:

<body>
	<div id="contenedor">
		<div id="lateral">
		
		</div>
	</div>
</body>

La página tiene mas DIVs, pero los 2 que tienen que llegar hasta el final, son esos 2.

Gracias de ante mano.

Pd: Use el buscador pero no encontré nada que me ayude.

Saludos!

baccxus · #2 (**permalink**) 06/04/2009, 18:09

Hola.

Me imagino que quieres que el color o borde de una de estas divisiones, o de las 2, llegue hasta el final aún sin tener lo suficiente (a veces hasta yo mismo me enredo explicando); si es esto lo que quieres, puedes hacer una imagen de background en el contenedor con los colores y/o el borde de tu lateral (si necesitas, también incluye el fondo del contenido); para que la imagen no te ocupe mucho espacio, la haces de 1px de altura y la pones para que se repita hacia el eje Y.

ejemplo

Código:

#contenedor{
/*Este fondo crea el efecto de columnas hasta el final del contenedor*/
background: url('imagen_de_background.png') left repeat-y;
}

Saludos

PD: Avísame si no entendiste lo que expliqué

FedericoC · #3 (**permalink**) 06/04/2009, 18:42

Gracias por responder.

Si pongo una imagen de fondo, ¿no me quedaría igual el tamaño?, únicamente necesito que el DIV Contendor, (y también un lateral que tengo dentro del mismo) llegue hasta el final de la pagina.

baccxus · #4 (**permalink**) 06/04/2009, 23:11

Y si la pantalla es vertical a 1920 pixeles, ¿aun querrias tener todo ese espacio vacío?. Prueba lo que te puse en la respuesta anterior y si no te sirve, haz un dibujo / bosquejo de lo que quieres y lo montas para que lo veamos y asi ayudarte un poco más

FedericoC · #5 (**permalink**) 07/04/2009, 06:37

Ahí adjunte una captura.

Lo que necesito es que esos dos DIVs lleguen hasta el final de la página…

Saludos.

Aresillo · #6 (**permalink**) 07/04/2009, 07:03

prueba poniendo en el html, en la parte final del div de cada columna esto:
<div class="corte"></div>

y en el css

.corte{clear:both}

A ver si se soluciona?

FedericoC · #7 (**permalink**) 07/04/2009, 07:27

Cita:

Iniciado por Aresillo

prueba poniendo en el html, en la parte final del div de cada columna esto:
<div class="corte"></div>

y en el css

.corte{clear:both}

A ver si se soluciona?

Hola, probé pero no funciono :(

Dalvenjha · #8 (**permalink**) 07/04/2009, 08:32

No se si te lo solucione, pero si es en ie que ves ese error deberías poner también:

html{
width:100%;
height:100%;
}

baccxus · #9 (**permalink**) 07/04/2009, 10:20

Prueba a hacer el background directamente al body ya que tienes tu web hacia el lado derecho

Código:

body {
background: #EFEFEF url('images/bg.png') left repeat-y;
}

y Se vería así

Saludos

FedericoC · #10 (**permalink**) 07/04/2009, 17:40

Perdón pero en la screen corte un pedazo de la izquierda, por lo que no se ve que esta centrado el DIV. Lo que busco hacer es exactamente como lo pusiste pero que este centrado en el medio. ¿Alguna idea?

Saludos!

baccxus · #11 (**permalink**) 07/04/2009, 18:51

la misma, sólo que lo centras

Código:

body {
background: #EFEFEF url('images/bg.png') top center repeat-y;
}

Saludos

jomaruro · #12 (**permalink**) 08/04/2009, 13:33

Hola:

Prueba esto:

1º El CSS:

Código:

* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
}

#contenedor {
    width: 100%;
    height: 100%;
    margin:0;
    background-color: #ccc;
}

#columna {
    height: 100%;
    float: left;
    width: 200px;
    background-color: #f00;
}

2º el HTML:

Código:

    <body>
        <div id="contenedor">
            <div id="columna"></div>
        </div>
    </body>

Espero que te funcione y sea lo que quieres.

Saludos.