Menú
Inicio
Foros
Nuevos mensajes
Buscar en foros
Novedades
Nuevos mensajes
Nuevos mensajes de perfil
Última actividad
Miembros
Visitantes actuales
Nuevos mensajes de perfil
Buscar mensajes de perfil
Acceder
Registrarse
Novedades
Buscar
Buscar
Buscar sólo en títulos
De:
Nuevos mensajes
Buscar en foros
Menú
Acceder
Registrarse
Install the app
Instalar
Novedades
Foros
Arte, Cultura y Comunicación
Diseño
CSS : Hacer un DIV contenedor estirado a lo alto en una web
JavaScript está desactivado. Para una mejor experiencia, por favor, activa JavaScript en el navegador antes de continuar.
Estás usando un navegador obsoleto. No se pueden mostrar este u otros sitios web correctamente.
Se debe actualizar o usar un
navegador alternativo
.
Responder al tema
Mensaje
<blockquote data-quote="matrux" data-source="post: 936848" data-attributes="member: 3433"><p>Todos sabemos que es PECADO maquetar (distribuir los elementos) una web usando TABLAS! Pero yo no soy enemigo de las tablas, a veces las uso porque me sacan de problemas.</p><p></p><p>Muchas veces necesitamos hacer un DIV contenedor que abarque todo el alto de una página web, pero si el alto de la ventana del explorador es mayor que el alto del contenido de la web, nuestra página se vería así:</p><p></p><p style="text-align: center"><a href="http://3.bp.blogspot.com/-JYLZ5OVrwQ0/TY_Rq0uxnvI/AAAAAAAAACk/ZhzxmJK5Klo/s1600/Vista-1.jpg"><img src="http://3.bp.blogspot.com/-JYLZ5OVrwQ0/TY_Rq0uxnvI/AAAAAAAAACk/ZhzxmJK5Klo/s640/Vista-1.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></p><p></p><p>... cuando lo que en realidad queremos es que se vea así:</p><p></p><p style="text-align: center"><a href="http://2.bp.blogspot.com/-KPd4t93Md9w/TY_Rtx1PTmI/AAAAAAAAACo/QSq8S7t9lD4/s1600/Vista-2.jpg"><img src="http://2.bp.blogspot.com/-KPd4t93Md9w/TY_Rtx1PTmI/AAAAAAAAACo/QSq8S7t9lD4/s640/Vista-2.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></p><p></p><p>El truco está en definir en nuestra hoja de estilos el alto de la etiqueta HTML y del BODY:</p><p></p><p>[CODE]html{</p><p> height:100%;</p><p>}</p><p></p><p>body {</p><p> height:100%;</p><p>}</p><p></p><p>[/CODE]</p><p></p><p>Además, el estilo de nuestro DIV contenedor tendría que ser algo así:</p><p></p><p>[CODE]#MainContainer {</p><p> margin:auto;</p><p> background-color:#ececec;</p><p> width:610px;</p><p> height:100%;</p><p> position:relative;</p><p> top:0px;</p><p> bottom:0px;</p><p>}</p><p></p><p></p><p>[/CODE]</p><p>Recordemos que para centrar horizontalmente nuestro contenido en una web utilizamos margin-left y margin-right como <em>auto</em></p><p></p><p>Nuestro HTML sería algo así:[CODE]</p><p></p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><link href="styles.css" type="text/css" rel="stylesheet" /></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><title>Ejemplo de cómo "estirar" un layer a lo alto de una ventana de explorador</title></p><p></head></p><p></p><p><body></p><p> <div id="MainContainer"></p><p> Contenido de alto variable</p><p> </div></p><p></body></p><p></html></p><p>[/CODE]</p><p>Espero que sirva esto como un punto más para el uso de DIVs en vez de TABLEs para maquetar una web. No les tengan miedo, todo se puede hacer siempre que se sepa utilizar.</p></blockquote><p></p>
[QUOTE="matrux, post: 936848, member: 3433"] Todos sabemos que es PECADO maquetar (distribuir los elementos) una web usando TABLAS! Pero yo no soy enemigo de las tablas, a veces las uso porque me sacan de problemas. Muchas veces necesitamos hacer un DIV contenedor que abarque todo el alto de una página web, pero si el alto de la ventana del explorador es mayor que el alto del contenido de la web, nuestra página se vería así: [CENTER][URL="http://3.bp.blogspot.com/-JYLZ5OVrwQ0/TY_Rq0uxnvI/AAAAAAAAACk/ZhzxmJK5Klo/s1600/Vista-1.jpg"][IMG]http://3.bp.blogspot.com/-JYLZ5OVrwQ0/TY_Rq0uxnvI/AAAAAAAAACk/ZhzxmJK5Klo/s640/Vista-1.jpg[/IMG][/URL][/CENTER] ... cuando lo que en realidad queremos es que se vea así: [CENTER][URL="http://2.bp.blogspot.com/-KPd4t93Md9w/TY_Rtx1PTmI/AAAAAAAAACo/QSq8S7t9lD4/s1600/Vista-2.jpg"][IMG]http://2.bp.blogspot.com/-KPd4t93Md9w/TY_Rtx1PTmI/AAAAAAAAACo/QSq8S7t9lD4/s640/Vista-2.jpg[/IMG][/URL][/CENTER] El truco está en definir en nuestra hoja de estilos el alto de la etiqueta HTML y del BODY: [CODE]html{ height:100%; } body { height:100%; } [/CODE] Además, el estilo de nuestro DIV contenedor tendría que ser algo así: [CODE]#MainContainer { margin:auto; background-color:#ececec; width:610px; height:100%; position:relative; top:0px; bottom:0px; } [/CODE] Recordemos que para centrar horizontalmente nuestro contenido en una web utilizamos margin-left y margin-right como [I]auto[/I] Nuestro HTML sería algo así:[CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link href="styles.css" type="text/css" rel="stylesheet" /> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo de cómo "estirar" un layer a lo alto de una ventana de explorador</title> </head> <body> <div id="MainContainer"> Contenido de alto variable </div> </body> </html> [/CODE] Espero que sirva esto como un punto más para el uso de DIVs en vez de TABLEs para maquetar una web. No les tengan miedo, todo se puede hacer siempre que se sepa utilizar. [/QUOTE]
Verificación
Responder
Novedades
Foros
Arte, Cultura y Comunicación
Diseño
CSS : Hacer un DIV contenedor estirado a lo alto en una web
Arriba