Foros del Web » Creando para Internet » CSS »

Div - Altura 100%

Estas en el tema de Div - Altura 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2009, 18:41
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 2
Div - Altura 100%

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!
  #2 (permalink)  
Antiguo 06/04/2009, 19:09
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Div - Altura 100%

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é
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 06/04/2009, 19:42
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Div - Altura 100%

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.
  #4 (permalink)  
Antiguo 07/04/2009, 00:11
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Div - Altura 100%

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
__________________
Al final del día hablar es gratis, codificar no lo es
  #5 (permalink)  
Antiguo 07/04/2009, 07:37
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Div - Altura 100%



Ahí adjunte una captura.

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

Saludos.
  #6 (permalink)  
Antiguo 07/04/2009, 08:03
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Div - Altura 100%

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?
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #7 (permalink)  
Antiguo 07/04/2009, 08:27
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Div - Altura 100%

Cita:
Iniciado por Aresillo Ver Mensaje
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 :(
  #8 (permalink)  
Antiguo 07/04/2009, 09:32
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Div - Altura 100%

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%;
}
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #9 (permalink)  
Antiguo 07/04/2009, 11:20
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Div - Altura 100%

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
__________________
Al final del día hablar es gratis, codificar no lo es
  #10 (permalink)  
Antiguo 07/04/2009, 18:40
 
Fecha de Ingreso: junio-2004
Ubicación: Argentina
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: Div - Altura 100%

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!
  #11 (permalink)  
Antiguo 07/04/2009, 19:51
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Div - Altura 100%

la misma, sólo que lo centras

Código:
body {
background: #EFEFEF url('images/bg.png') top center repeat-y;
}
Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #12 (permalink)  
Antiguo 08/04/2009, 14:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Div - Altura 100%

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.

Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:57.