
	Portada \| Monotemáticos \| Secciones \| Desarrolladores \| Comunidad \| Servicios \| Servicios profesionales \| RSS

	DesarrolloWeb.com > FAQ

Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades

Generador METAs | Compras | Busca cursos

Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

CSS height: 100% - Alto de capa que sea el de la ventana del navegador

Estoy intentando hacer una capa que ocupe de alto máximo de la ventana del navegador. No se si me explico… lo que quiero es que el espacio de la capa ocupe desde la parte de arriba hasta la parte de debajo del navegador.

He probado con height:100%, que se supone que debería funcionar, pero no consigo que la capa llegue hasta abajo. Le he dado color de fondo para ver si llega, pero se termina donde terminan los contenidos. Igual que width:100% ocupa todo el ancho ¿no debería con height:100% ocupar todo el alto?

Hay alguna manera de conseguir esto?
O algún truco para que el espacio ocupado de la capa sea el alto completo de la ventana?

La FAQ CSS height: 100% - Alto de capa que sea el de la ventana del navegador tiene Una respuesta
un comentario no revisado
Pertenece a la categoría:

CSS

Respuesta de Miguel Angel Alvarez

02/1/08

El Problema del CSS height 100% ya lo he tratado otras veces. Efectivamente, hay un truquillo para conseguir que un contenedor ocupe el tamaño completo del área disponible del navegador a lo alto.

En realidad lo estás haciendo bien, osea, estás colocando el atributo height:100%, que es el que te va a servir para esto, pero también tienes que ponerlos como atribuitos al body y la etiqueta html.

Supongo que tendrás algo como esto:

<div id="contenedor" style="width:100%; height:100%;">

Contenido que tiene que ocupar todo el espacio del navegador.

</div>

Pues además tendrías que meter esto otro, para que tanto el body como el html tengan el height=100%: (además de cada contenedor que haya hasta llegar a la capa que quieres que ocupe todo el alto)

<style type="text/css">

html,body{

margin:0px;

height:100%;

}

</style>

Un ejemplo completo, maquetado con CSS, para que funcione el height: 100%:

<html>

<head>

   <title>maquetado CSS utilizando todo el height</title>



<style type="text/css">

html,body{

margin:0px;

height:100%;

}

</style>

</head>

<body>

<div id="contenedor" style="width:100%; height:100%;">

   <div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">

      <div id="contenidolateral" style="padding: 30px 10px 0 10px;">

      Por <a href="http://www.guiarte.com">guiarte.com</a>

      <br />

      <br />

      Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con contendor de todo el alto..

      </div>

   </div>

   <div id="map" style="height: 100%; margin-right:210px; background-color:#ffff99;">

   Contenido que tiene que ocupar todo el espacio del navegador.

   </div>

</div>

</body>

</html>

Complementar la respuesta
Volver al árbol de categorías

Comentarios sin revisar

Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

FAQ relacionadas
  + Estilos en barras de desplazamiento
  + Estilos CSS en los botones de formularios y Netscape 4
  + Manuales de CSS
  + Enlaces que cambian al pasar el ratón
  + ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas?
  + ¿Como puedo cambiar el color de la barra de desplazamiento?.
  + Diferencias de colocar estilos CSS en distintos lugares
  + Cambiar color a los enlaces
  + Quitar subrayado a los enlaces
  + Quiero personalizar los links de mi página para que todos sean distintos los unos de los otros
  + Estilo en los campos de formulario
  + Cambiar el tamaño de letra de un menú select
  + Cambiar el estilo de la primera letra de un párrafo
  + Aplicar estilo a la primera línea de un texto
  + Menú dinámico con CSS
  + Textarea sin borde
  + Clip en un div
  + Efecto sombra en mi página
  + Maquetar un boletín con CSS
  + Caja con CSS
  + Estilo en tablas HTML con CSS
  + Aspecto del cursor con CSS
  + Capas en CSS
  + Qué es Shorthand
  + Maquetar una web con CSS
  + problema al aplicar z-index a elementos select de formulario
  + Maquetar por tablas o por capas
  + Algunos programas para editar CSS
  + Maquetar galería de fotos con CSS
  + Rollover con CSS
  + Botones con estilos
  + ¿Qué Significa CSS?
  + Minúsculas con CSS
  + Hojas de estilo en cascada (CSS)
  + Formulario con CSS
  + Efecto de sombra con CSS
  + Cambiar tipografía para toda la página
  + Imprimir con CSS
  + Comentarios en CSS
  + Cómo eliminar los márgenes abajo y arriba que tiene un formulario
  + ...

Para ver más FAQ relacionadas accede a las categorías:

CSS

Complementar la respuesta
Volver al árbol de categorías

		DesarrolloWeb.com \| Copyright \| Anunciese \| Acerca de \| Datos legales \| Contacta \| Por GuiarteMultimedia

Alojamiento web

	Complementar la respuesta
	Volver al árbol de categorías