Re: [Ovillo] Problemas con heigth 100%
Yo pondría la estructura/marcado de la siguiente forma:
div id=contenedor
div id=cabecera/div
div id=menu/div
div id=contenido/div
/div
div id=pie/div
¿Por qué el pie fuera del contenedor? Mira el CSS.
Después, en el css:
html, body {
height: 100%;
}
#contenedor{
min-height: 100%; /*esta propiedad no la soporta IE6*/
}
* html #contenedor { /*Hack para IE6*/
height: 100%;
}
#pie {
position: relative:
height: 20px; /*la altura que necesites para el pie*/
margin-top: -20px; /*la altura del pie pero en negativo*/
}
Bueno, creo que te he hecho los deberes ;-)
Espero que te sirva.
Salu2.
-Mensaje original-
De: Yubén [mailto:[EMAIL PROTECTED]
Enviado el: martes, 29 de enero de 2008 14:17
Para: ovillo@lists.ovillo.org
Asunto: [Ovillo] Problemas con heigth 100%
Buenas a todos
Tengo el siguiente conflicto, tengo varios div, todos con un alto fijo
y uno de ellos quiero que se adapte con height al 100% a resto de la
ventana del navegador:
Para que se entienda bien pongo un ejemplo:
Cabecera: 100px de alto
Menu: 50px de alto
Contendios: alto del resto de la ventana¡, lo intento conseguir con
el heigth al 100%
Pie: 150px alto
El motivo para querer hacer esto es que la capa pie, quiero que este
siempre pegada en la parte de abajo de la ventana, aunque el contenido
no sea el suficiente para que esto ocurra.
Inicialmente tenia un problema que me ignoraba el heigth de la capa
contenidos, al final lo solucione poniendo heigth al 100% también al
body.
el problema que tengo ahora vine por lo siguiente:
Todo funciona bien si no fuera porque la capa contenidos coje el 100%
que tiene body, sin restar lo que ya han cogido las capas con alto
fijo, con lo que se me genera un scroll vertical en la pagina, sin ser
necesario.
Alguien se a encontrado con este problema, agradecería una ayuda
un saludo
yubén
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.516 / Virus Database: 269.19.16/1250 - Release Date: 29/01/2008
22:20
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
Hola Yubén. No me he parado a probarlo, pero imagino que con aplicarle un margin-top: -100px a la capa Contendios puedes solucionar el problema. Espero que te ayude. Un saludo, David Merino Ogando 2008/1/29 Yubén [EMAIL PROTECTED]: Buenas a todos Tengo el siguiente conflicto, tengo varios div, todos con un alto fijo y uno de ellos quiero que se adapte con height al 100% a resto de la ventana del navegador: Para que se entienda bien pongo un ejemplo: Cabecera: 100px de alto Menu: 50px de alto Contendios: alto del resto de la ventana¡, lo intento conseguir con el heigth al 100% Pie: 150px alto El motivo para querer hacer esto es que la capa pie, quiero que este siempre pegada en la parte de abajo de la ventana, aunque el contenido no sea el suficiente para que esto ocurra. Inicialmente tenia un problema que me ignoraba el heigth de la capa contenidos, al final lo solucione poniendo heigth al 100% también al body. el problema que tengo ahora vine por lo siguiente: Todo funciona bien si no fuera porque la capa contenidos coje el 100% que tiene body, sin restar lo que ya han cogido las capas con alto fijo, con lo que se me genera un scroll vertical en la pagina, sin ser necesario. Alguien se a encontrado con este problema, agradecería una ayuda un saludo yubén ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
Buenas!
La verdad que la solución la he conseguido, con parte de tu respuesta
jaume.
Realmente lo que quería, era que la capa pie, siempre estuviese pegada
al fondo de la pagina, el 100% solo lo utilizaba para intentar forzar
esto.
pero esta parte:
#pie{
position:absolute;
bottom:0;
}
me ha ayudado, la verdad ayer probé esto, la capa pie se pegaba al
fondo, y me dejaba de funcionar otra cosa, que era que dentro de la
capa pie que ocupaba todo el ancho del navegador había otra capa
contenedora con ancho fijo centrada horizontalmente en la capa pie,
pero añadiendo a esta capa también width al 100% he conseguido adaptar
el diseño a lo que quería. bueno no se si esto ultimo se entiende :-),
un saludo
Gracia a todos por vuestras aportaciones
yubén
El 29/01/2008, a las 22:34, jaume op escribió:
Que hay, saludos a [EMAIL PROTECTED] Lo que veo es que al sumar todo los
elementos me da
mas del 100%. Si das 100% al body y al html , 100% al contenido mas
los
pixeles de cabecera y pie =scroll. Espero lo entiendas es el
boxmodel pero
con el height.
Mira haaber si te vale
*{margin:0;
padding:0;
}
html, body {
height: 100%;
width: 100%;
}
body {
height: 100%;
}
#contenedor{
height:100%
} // la cabecera , y el contenido como quieras , yo no pondria en
principio
height.
#pie{
position:absolute;
bottom:0;
}
y en el html
div id=contenedor
div id=cabecera/div
div id=contenido/div
div id=pie/div
/div
asi tambiem podrias decirle al
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
salud a la lista;
éste es un problema de los típicos.
me topé con él hace tiempo y gracias a la ayuda de los compañeros aquí
presentes conseguí solucionarlo de varias maneras.
posteo una de ellas a continuación por si a yubén o a otros pudiera serles
de ayuda.
html:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html lang=es
head
link rel=stylesheet href=estilo.css type=text/css media=screen
title=no title charset=utf-8/
titleindex/title
/head
body
div id=contenedor
div id=cabecera
h1CABECERA/h1
/div!--fin cabecera--
div id=cuerpo
div id=contenido
div id=izquierda
h1MENÚ/h1
pLorem ipsum eum partem corrumpit et, qui
puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea
libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque
his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto
iisque mel, quidam feugiat ut est./p
/div!--fin izquierda--
div id=derecha
h1CONTENIDO/h1
pLorem ipsum eum partem corrumpit et, qui
puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea
libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque
his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto
iisque mel, quidam feugiat ut est./p
pLorem ipsum eum partem corrumpit et, qui
puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea
libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque
his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto
iisque mel, quidam feugiat ut est./p
/div!--fin derecha--
div class=clear/div
/div!--fin contenido--
/div!--fin cuerpo--
/div!--fin container--
div id=pie
h1PIE/h1
/div!--fin pie--
/body
/html
css:
/*inicio tags genéricos*/
*{
padding:0;
margin:0;
}
html {
height:100%;
}
body {
height:100%;
font-family:verdana, arial, sans-serif;
text-align:center;
background:#595959;
}
p{
padding:10px;
}
h1{
text-align:center;
}
/*fin tags genéricos*/
/*inicio tags específicos*/
#contenedor {
min-height:100%;
width:800px;
background:#A9A9A9;
text-align:left;
margin:0 auto;
}
* html #contenedor {
height:100%;
}
#cabecera{
position:relative;
right:0px;
top:0px;
width:100%;
height:10em;
background:#000;
color:#fff;
}
#cuerpo {
padding:1px;
position:relative;
background:#A9A9A9;
text-align:center;
}
#contenido {
text-align:justify;
}
#izquierda{
width:20%;
float:left;
position:relative;
background:#fff;
}
#derecha{
width:79.8%;
position:relative;
float:right;
background:#fff;
}
.clear {overflow:hidden;height:50px;clear:both;}
* html .clear {overflow:hidden;height:40px;clear:both;}
#pie{
height:3em;
background:#000;
color:#fff;
position:relative;
margin:0 auto;
margin-top:-3em;
width:800px;
}
/*fin tags específicos*/
un saludo!
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problemas con heigth 100%
Buenas a todos Tengo el siguiente conflicto, tengo varios div, todos con un alto fijo y uno de ellos quiero que se adapte con height al 100% a resto de la ventana del navegador: Para que se entienda bien pongo un ejemplo: Cabecera: 100px de alto Menu: 50px de alto Contendios: alto del resto de la ventana¡, lo intento conseguir con el heigth al 100% Pie: 150px alto El motivo para querer hacer esto es que la capa pie, quiero que este siempre pegada en la parte de abajo de la ventana, aunque el contenido no sea el suficiente para que esto ocurra. Inicialmente tenia un problema que me ignoraba el heigth de la capa contenidos, al final lo solucione poniendo heigth al 100% también al body. el problema que tengo ahora vine por lo siguiente: Todo funciona bien si no fuera porque la capa contenidos coje el 100% que tiene body, sin restar lo que ya han cogido las capas con alto fijo, con lo que se me genera un scroll vertical en la pagina, sin ser necesario. Alguien se a encontrado con este problema, agradecería una ayuda un saludo yubén ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
Hola,
una idea sería definir un height-min, dependiendo de lo que necesites... por
ejemplo
para IE:
.contenidos {
height: 20em;
}
para FF:
.contenidos {
min-height: 20em;
height: auto;
}
De esta manera defines un height mínimo, y si hay más contenidos el
contenedor no se queda a la altura definida sino se hace más alto.
Espero soluciones tu problema.
Saludos,
Tamara
2008/1/29 Yubén [EMAIL PROTECTED]:
Buenas a todos
Tengo el siguiente conflicto, tengo varios div, todos con un alto fijo
y uno de ellos quiero que se adapte con height al 100% a resto de la
ventana del navegador:
Para que se entienda bien pongo un ejemplo:
Cabecera: 100px de alto
Menu: 50px de alto
Contendios: alto del resto de la ventana¡, lo intento conseguir con
el heigth al 100%
Pie: 150px alto
El motivo para querer hacer esto es que la capa pie, quiero que este
siempre pegada en la parte de abajo de la ventana, aunque el contenido
no sea el suficiente para que esto ocurra.
Inicialmente tenia un problema que me ignoraba el heigth de la capa
contenidos, al final lo solucione poniendo heigth al 100% también al
body.
el problema que tengo ahora vine por lo siguiente:
Todo funciona bien si no fuera porque la capa contenidos coje el 100%
que tiene body, sin restar lo que ya han cogido las capas con alto
fijo, con lo que se me genera un scroll vertical en la pagina, sin ser
necesario.
Alguien se a encontrado con este problema, agradecería una ayuda
un saludo
yubén
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
Hola !!!
No sé si te servirá de mucho mi aportación, pero lo mismo, te soluciona algo
(si es que no la habías previsto ya):
lo que suelo hacer es definir siempre en el CSS las etiquetas HTML y BODY y
darle a ambas el valor de height.
Por ejemplo:
html, body {
height: 100%;
width: 100%;
}
body {
height: 100%;
margin:0px;
font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con heigth 100%
Que hay, saludos a [EMAIL PROTECTED] Lo que veo es que al sumar todo los
elementos me da
mas del 100%. Si das 100% al body y al html , 100% al contenido mas los
pixeles de cabecera y pie =scroll. Espero lo entiendas es el boxmodel pero
con el height.
Mira haaber si te vale
*{margin:0;
padding:0;
}
html, body {
height: 100%;
width: 100%;
}
body {
height: 100%;
}
#contenedor{
height:100%
} // la cabecera , y el contenido como quieras , yo no pondria en principio
height.
#pie{
position:absolute;
bottom:0;
}
y en el html
div id=contenedor
div id=cabecera/div
div id=contenido/div
div id=pie/div
/div
asi tambiem podrias decirle al
2008/1/29, Rafael Ferrero Rodríguez [EMAIL PROTECTED]:
Hola !!!
No sé si te servirá de mucho mi aportación, pero lo mismo, te soluciona
algo
(si es que no la habías previsto ya):
lo que suelo hacer es definir siempre en el CSS las etiquetas HTML y BODY
y
darle a ambas el valor de height.
Por ejemplo:
html, body {
height: 100%;
width: 100%;
}
body {
height: 100%;
margin:0px;
font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif
}
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
