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

[Hydross]

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 :)

[TheDark03]

Hola...
solo agrega la parte q te falta... y ya lo tienes

Código CSS:

*{
margin: 0;
padding: 0;
}
 
html {
height : 100%;
}
body {
height:100%;
}
 
#web {
    width:100%;
    height:100%;
    background-color:#fff;
    }
    
#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;
    }
 

Saludos DTB

[Hydross]

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 :)

[TheDark03]

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

[Hydross]

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 :)

[TheDark03]

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...

[Hydross]

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 :)

[TheDark03]

De nada... DTB

[Hydross]

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.

[ArturoGallegos]

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

[Hydross]

Iniciado por Ag666

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.

[ArturoGallegos]

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

[TheDark03]

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