Re: [Ovillo] Problemas con heigth 100%
Yo pondría la estructura/marcado de la siguiente forma:
¿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%
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:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
index
CABECERA
MENÚ
Lorem 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.
CONTENIDO
Lorem 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.
Lorem 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.
PIE
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
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
>
>
>
>
> 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%
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%
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
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
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%
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
[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
