Comunidad de diseño web y desarrollo en internet online

Altura div 100%

Citar            
MensajeEscrito el 06 Sep 2006 09:30 am
Buenas de nuevo!! :D
En el otro tema que abrí sobre el margin de un div ya lo pregunte, pero como el post iba sobre otra cosa abro uno nuevo para explicar bien el tema. Tengo un div contenedor que tiene un color de fondo y un borde lateral. La altura de este div tiene que ser siempre el 100%, pero el problema es que en firefox el 100% es sólo el área que visualizas en pantalla, es decir, que si desciendes con el scroll vertical ves que el contenedor desaparece :crap: .
Aquí un ejemplo:
http://www.nocolor.es/problema/altura.htm

Ya sé que es algo muy común y que se puede solucionar estableciendo una altura mínima, pero el problema es que, en la página que estoy diseñando, tendría que crear un contenedor por cada página ya que la altura del contenido no es siempre la misma. Si tengo que hacerlo no pasa nada, pero quería preguntar si a alguien se le ha ocurrido alguna forma de hacerlo sin utilizar un div contendor por cada página. Ainss que jaleo de navegadores :D .

Gracias por anticipado y un saludo a todos!!! :wink:

Por CanMc

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2006 10:53 am

Código :

html, body {
    height:100%;
}

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 06 Sep 2006 10:56 am
Eso no funciona, ya está en el código. Sólo funciona para Internet explorer y yo el problema lo tengo con firefox y Opera. Gracias de todos modos por contestar :wink: .

Alguien da más? ofrezco un jamón y una caja de vino para el que sepa la solución!! :lol: :lol:

Salu2!

Por CanMc

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2006 10:56 am
Tambien le has puesto al div?

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 06 Sep 2006 11:00 am
También. Aunque esté en la web voy a pegar el código:

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Altura de div</title>
<style type="text/css">
body, html {
   height:100%;
   margin:0;
   padding:0;
}
#contenedor {
   width:600px;
   height:100%;
   background:#9CC;
   margin:0 auto;
   border-right:1px #333 solid;
   border-left:1px #333 solid;
}
#contenido {
   width:300px;
   background:#069;
   float:left;
   margin: 10px 0 0 10px;
   color:#FFF;
}
</style>
</head>
<body>
<div id="contenedor">
  <div id="contenido">
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
    <p>SOS. QUIERO QUE LOS BORDES OCUPEN EL 100% Y NO EL AREA QUE SE VISUALIZA.</p>
  </div>
</div>
</body>
</html>

Salu2!!

Por CanMc

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 Sep 2006 06:22 pm
Holas, me he tomado este problema personalmente, porque se supone que es algo simple de realizar, estuve tratando y nada.

Hace tiempo tuve el mismo problema, busque en google y encontre la solucion que sigue

html, body {
height:100%;
margin:0;
padding:0;
}
#contenedor {
width:600px;
min-height:100%;
background:#9CC;
margin:0 auto;
border-right:1px #333 solid;
border-left:1px #333 solid;
}

*html #contenedor {
height:100%;
}


#contenido {
width:300px;
background:#069;
float:left;
margin: 0;
color:#FFF;
height:100%
}


Creo que es todo, lo resaltado son las modificaciones, apliqué lo mismo para una web, y resultó "solo que" tenia que omitir el doctype, ya que al colocar cualquiera de sus variantes no me estiraba el div, y lo mismo ocurre con este codigo (solo en Firefox), al quitar el doctype (transitional -.-) me iguala el tamaño de las columnas pero me deja espacio en blanco debajo y recorta unos de los parrafos finales, pero si lo coloco no me hace ninguna modificacion, osea lo mismo :cry:

faux columns no creo que sea lo adecuado para este caso o si?

Por Max

Claber

267 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 09 Sep 2006 07:48 pm
Entiendo el problema, pero me gustaria saber el motivo detras de la pregunta, para que quieres hacerlo? Para ponerle un color de fondo o algo asi? Si es asi estarias desperdiciando tu tiempo ya que podrias usar solo una imagen que se repita en posicion-y.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 09 Sep 2006 11:40 pm
Hola Neo, el fin de lo descrito es meramente educativo, ya que no entiendo que es lo que se esta haciendo mal en ese sencillo ejemplo

Por Max

Claber

267 de clabLevel



Genero:Masculino  

Lima - Peru

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.