Foros del Web » Creando para Internet » CSS »

¿Cómo usar el 100% de la altura?

Estas en el tema de ¿Cómo usar el 100% de la altura? en el foro de CSS en Foros del Web. Buenas. Mi intención, usando CSS, es montar la estructura básicamente con porcentajes y únicamente tamaño fijo para altura del header y footer, y anchura del ...
  #1 (permalink)  
Antiguo 09/08/2010, 10:00
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
¿Cómo usar el 100% de la altura?

Buenas.

Mi intención, usando CSS, es montar la estructura básicamente con porcentajes y únicamente tamaño fijo para altura del header y footer, y anchura del menu.

El problema lo tengo con la primera capa, por así decirlo, que ponga la altura que ponga en % no me la coje, únicamente con px.
Y quiero hacer que me coja tanto anchura (que ya lo hace) como altura, dependiendo del tamaño de la ventana.

Aquí el código:
Código:
#web {
	width: 100%;
	height: 100%;
	background-color: white;
	}
	
#header {
	width: 100%;
	height: 150px;
	background-color: black;
	}

#menu {
	width: 300px;
	height: 300px;
	background-color: red;
	float: left;
	}
	
#contenido {
	width: 100%;
	height: 300px;
	background-color: blue;
	}

#footer {
	width: 100%;
	height: 50px;
	background-color: grey;
	}
Gracias :)

Última edición por Hydross; 09/08/2010 a las 10:06
  #2 (permalink)  
Antiguo 09/08/2010, 11:29
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: ¿Cómo usar el 100% de la altura?

Hola...
solo agrega la parte q te falta... y ya lo tienes
Código CSS:
Ver original
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. html {
  7. height : 100%;
  8. }
  9. body {
  10. height:100%;
  11. }
  12.  
  13. #web {
  14.     width:100%;
  15.     height:100%;
  16.     background-color:#fff;
  17.     }
  18.    
  19. #header {
  20.     width: 100%;
  21.     height: 150px;
  22.     background-color: black;
  23.     }
  24.  
  25. #menu {
  26.     width: 300px;
  27.     height: 300px;
  28.     background-color: red;
  29.     float: left;
  30.     }
  31.    
  32. #contenido {
  33.     width: 100%;
  34.     height: 300px;
  35.     background-color: blue;
  36.     }
  37.  
  38. #footer {
  39.     width: 100%;
  40.     height: 50px;
  41.     background-color: grey;
  42.     }

Saludos DTB
  #3 (permalink)  
Antiguo 09/08/2010, 11:50
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: ¿Cómo usar el 100% de la altura?

Antes de nada, gracias, parece estar CASI solucionado.
¿Podrías explicarme qué son las etiquetas "*" (Y lo que contiene) y "html"? Ya que no entiendo en que afectan, por así decirlo.

Por otro lado ahora mismo lo tengo así:
Código:
*	{
	margin: 0;
	padding: 0;
	}

body {
	font-family: verdana;
	font-size: 15px;
	color: black;
	background-color: #262626; /*Color de fondo gris oscuro*/
	margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; /*Márgenes*/
	height: 100%;
	}
	
html {
	height: 100%;
	}

a:link {
	text-decoration: none; 
	color: white;
	}
	
a:visited {
	text-decoration: none; 
	color: white;
	}
	
a:hover {
	color: #ff8c00;
	}
	
.idioma {
	/* Posición */
	width: 700px; 
	height: 450px;
	text-align: center;
	position:absolute;
	top: 30%;
	left: 50%;
	margin-top: -100px;
	margin-left: -350px;
	/* Propiedades */
	color: white;
	}
.logo {
	width: 700px; 
	height: 450px;
	text-align: center;
	position:absolute;
	top: 30%;
	left: 50%;
	margin-top: -100px;
	margin-left: -350px;
	background-image:url('/judith/images/logo.png');
	}

#web {
	width: 100%;
	height: 100%;
	background-color: white;
	}
	
#header {
	width: 100%;
	height: 150px;
	background-color: black;
	}

#menu {
	width: 300px;
	height: 100%;
	background-color: red;
	float: left;
	}
	
#contenido {
	width: 100%;
	height: 100%;
	background-color: blue;
	}

#footer {
	width: 100%;
	height: 50px;
	background-color: grey;
	}
Me he fijado que poniendo porcentajes, tal y como lo quiero, sobrepasa el tamaño de la ventana ya que, imagino, al 100% total le añade los tamaños fijos? Que son la altura del header y footer.
Por lo tanto, sea cual sea el tamaño de la ventana, siempre tendré la barra de desplazamiento con esos 200px de más.
¿Alguna manera de solucionarlo o tengo que encontrar exactamente el % restante para ponerlo en "menu" y "contenido"?

Nuevamente, gracias :)
  #4 (permalink)  
Antiguo 09/08/2010, 12:11
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: ¿Cómo usar el 100% de la altura?

hola de nuevo.. el * es un selector universal al = q el html mediante estos selectores tu le das las mismas propiedades a todos los elementos...

En la practica no son muy usados, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
estos se aplican a algunos "hacks" para IE o en combinacion con otros selectores

una de las aplicaciones basica es eliminar el margen y el relleno de todos los elementos HTML como en este ejemplo

* {
margin: 0;
padding: 0;
}

te sugiero q revises sobre resetear tu css

y sobre tu problema supongo q los div q tienen tamaño fijo estan fuera del contenedor #web

Saludos DTB

PD: No manejo tanta teoria :P solo la necesaria :P
  #5 (permalink)  
Antiguo 09/08/2010, 12:16
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: ¿Cómo usar el 100% de la altura?

Buenas.
Vale, ya me ha quedado más o menos claro.

Lo que no entiendo es lo que me acabas de decir de "resetear tu css", no sé a que te refieres.

Sobre el tamaño de los div, no están fuera de #web, te pongo el código:
Código:
<body>
	<div id="web">
		<div id="header">
			<?php include("header.php"); ?>
		</div>

		<div id="menu">
			<?php include("menu.php"); ?>
		</div>
			
		<div id="contenido">
			<?php include("contenido.php"); ?>
		</div>
		
		<div id="footer">
			<?php include("footer.php"); ?>
		</div>	
	</div>
</body>
Gracias :)
  #6 (permalink)  
Antiguo 09/08/2010, 12:29
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: ¿Cómo usar el 100% de la altura?

Hola... tu problema se debe a q no todos tus elementos son liquidos(divs q trabajen con %)

y en San Google pones "resetear css" y obtendras mayor informacion de la q yo te puedo brindar

PD: asi coo tu dices tendrias q encontrar el porcentajes restante despues de definir a tus div con una altura dada 2prueba" nose con un 85%

Saludos DTB...
  #7 (permalink)  
Antiguo 09/08/2010, 12:39
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: ¿Cómo usar el 100% de la altura?

Buscando he encontrado ésto: http://www.anieto2k.com/2007/08/07/reseteando-estilos-css/
Supongo que no es más que algunos parámetros que se recomiendan copiar antes de empezar a darle tu propio formato, de todos modos será cuestión de ir probando.

Por otro lado ya he arreglado los porcentajes del div, he ajustado el % y el tamaño en px de otro campo y ya está, perfecto.

Gracias por todo :)
  #8 (permalink)  
Antiguo 09/08/2010, 12:45
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: ¿Cómo usar el 100% de la altura?

De nada... DTB
  #9 (permalink)  
Antiguo 09/08/2010, 15:01
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: ¿Cómo usar el 100% de la altura?

Vuelvo a estar por aquí.
Me he dado cuenta que lo de tamaños fijos+porcentajes no es una solución, ya que dependiendo del navegador ésto cambia (ya que uno tiene más barra de herramientas, por ejemplo).

¿Alguna otra opción? No sé si hacer todo fijo y centrarlo.
  #10 (permalink)  
Antiguo 09/08/2010, 15:40
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Cómo usar el 100% de la altura?

podrías aplicar un ancho y alto mínimo (min-width y min-height)que te ayude a mantener una estética aceptable para tu sitio
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 09/08/2010, 15:48
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: ¿Cómo usar el 100% de la altura?

Cita:
Iniciado por Ag666 Ver Mensaje
podrías aplicar un ancho y alto mínimo (min-width y min-height)que te ayude a mantener una estética aceptable para tu sitio
¿Y cómo aplico eso? Quiero decir, el problema ahora mismo es que no encaja bien, si lo encajo en un navegado no funciona bien en otro.

¿La hago más pequeña, optimizada por ejemplo para monitor de 17" (por porcentajes) y entonces aplico lo que me has dicho poniendo un mínimo? Sino no se me ocurre otra.

Gracias.
  #12 (permalink)  
Antiguo 09/08/2010, 15:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Cómo usar el 100% de la altura?

el min-width y min-height usalo desde el inicio el valor de estos yo los uso en pixeles siendo el ancho mínimo para obtener una presentación aceptable del diseño

de esta manera si el monitor es grande tu sitio sera basado en los porcentajes pero si el monitor es pequeño tomara de base los pixeles que especifiques apareciendo los scrolls


Nota:
últimamente no me preocupo ya por el IE6 pero si interesas en maquetar para este explorador, el min-width y min-height tienen problemas
te dejo estos dos enlaces con la solución (aportes de mikmoro)

http://www.araudi.net/ejemplos/min-width_IE.html
http://www.araudi.net/ejemplos/max-height.html
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #13 (permalink)  
Antiguo 09/08/2010, 16:12
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: ¿Cómo usar el 100% de la altura?

solo acotar q el min-width y min-height no es soportado por todos los navegadores como el Ie6...

lo q se me ocurre si todavia deseas hacer ese tipo de diseño es hacer modificaciones a tu css dependiendo de la resolucion del monitor

ejemplo:
<script>
if (window.screen.width <= 800) {
document.write("<style type='text/css'> #web{80% }</style>");
}
else if (window.screen.width == 1024) {
document.write("<style type='text/css'> #web {height:75%; }</style>");
}
</script>
asi seria el codigo javascript

Saludos

Etiquetas: altura
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 22:39.