El DOCTYPE y el height en CSS

stephen · #1 (**permalink**) 09/01/2006, 19:54

Tengo el lío que no puedo hacer que un div abarque el 100% del alto de la pantalla al usar DOCTYPE, recuerdo haber leido que este no era un estándar pero en la pagina del w3c si esta.

Ya use el atributo position y el único valor que me abarca el 100% del alto es fixed pero me quita el scroll horizontal ya que dentro pienso meter un iframe en el cual se cargara paginas que talvez sean mas grandes que el tamaño predeterminado del div.

Alguna solución

La única que encuentro es quitar el DOCTYPE pero no se me hace sabia

Código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>El menú</title>
<style type="text/css">
<!--
#content {
 height: 100%;
 width: 400px;
 background-color: #99CCCC;
}
-->
</style>
</head>
<body>
<div id="content">Menú</div>
</body>
</html>

Holden · #2 (**permalink**) 09/01/2006, 20:54

Yo estoy tras el mismo problema.
Por lo pronto lo mas cercano a solucionarlo es usar js...

<script type="text/javascript">

</script>

Pero me niego a usar toda esta artimaña por algo tan sencillo.... no sè... si alguien tiene una respuesta por favor dejela por aquí.

Saludos

stephen · #3 (**permalink**) 10/01/2006, 10:51

Creo que ya voy encontrando una explicación al problema

http://www.alistapart.com/articles/fauxcolumns/

Aquí indica resolverlo con "un truco" pero no me termina de convencer y espero que tampo a ti Holden

.

RoQ · #4 (**permalink**) 10/01/2006, 11:10

prueba poniendo tambien esto en tu css:
html, body{
height: 100%;
}

stephen · #5 (**permalink**) 10/01/2006, 11:22

Perfecto!!!!!!!!!!! RoQ de nuevo gracias

Algo del problema tiene que ver con implementar correctamente css. En una traducción del w3c creo viene esto (creo) pero con la poca experiencia aun en div no termino de enteder el asunto, aquí esta la pagina.

http://www.sidar.org/recur/desdi/tra...s/visuren.html

Si alguien lo entiendie y lo puede explicar se agradeceria

stephen · #6 (**permalink**) 10/01/2006, 14:21

La solución si funciono en IE pero

no en Firefox 1.5 lo que me hace pensar que aun no hayo la forma correcta. La única solución al height es quitar el DOCTYPE pero repito no se me hace correcto, pero creo que sera la única solución por el momento.

Les dejo el código completo. Talvez alguien le de al clavo

para que los div abarquen el 100% restante de la pantalla en Firefox usando solo CSS como lo hace IE.

Código:

<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sistema</title>
<style type="text/css">
<!--
html { /*solo esta funcionando en IE*/
 height: 100%;
}
body {
 margin-left: 0px;
 margin-top: 69px;
 margin-right: 0px;
 margin-bottom: 0px;
}
#content {
 width: 100%;
 height: 100%;
}
#seccion1 {
 height: 69px;
 width: 100%;
 background-color: rgb(0,91,195);
 position: absolute;
 left: 0px;
 top: 0px;
}
#seccion2 {
 width: 235px;
 float: left;
 height: 100%;
}
#seccion3 {
 margin-left: 235px;
 height: 100%;
 background-color: #339966;
}
 
-->
</style>
</head>
<body scroll="no">
<div id="content">
  <div id="seccion1">Botones </div>
  <div id="seccion2"><iframe src="http://www.faqsdelweb.com/" name="main" width="100%" marginwidth="0" height="100%" marginheight="0" scrolling="auto" frameborder="0"></iframe></div>
  <div id="seccion3"><iframe src="http://www.w3c.org/" name="main" width="100%" marginwidth="0" height="100%" marginheight="0" scrolling="auto" frameborder="0"></iframe></div>
</div>
</body>
</html>

Nota: En opera ni funciona

RoQ · #7 (**permalink**) 10/01/2006, 18:30

Código PHP:

  <!--
html { /*solo esta funcionando en IE*/
 height: 100%;
}

es :
html, body no solamente html
lo probé en IE FF y opera y en IE se ve bien en FF y Opera no tanto porque sobrepasa, y eso se debe a que todo tiene un alto de 100% pero el body tiene un margen superior de 69px, que deberla ir en #content no en el body, y la altura de content con ese margen ya no deberla ser 100% sino 100% - 69px...¡¿que!? así es eso pasa por mezclar px con porcentajes, lo mejor que podrías hacer es darle un tamaño con % a la sección 1 (15%) y darle a content ese margen y el alto restante (85%).

stephen · #8 (**permalink**) 10/01/2006, 20:03

Perfecto RoQ

tu comentario

Cita:

100% - 69px...¡¿que!? así es eso pasa por mezclar px con porcentajes

me queda claro el problema "px con px" o "% con %" no revolver al maquetar.

He convertido todo a porcentajes como deviera ser para que se ajuste todo a cualquier dispositivo es lógico ahora que lo he realizado. Bendita usabilidad si le hubiera puesto mas atención no llevaria 2 días con esto

.

Solo otra pregunta más, la sección 2 tiene un float:left y me da en IE un margen como de un pixel es un Hack de IE 6. Como se lo quito ... estoy leyendo este sitio pero no le doy aun http://positioniseverything.net/explorer.html.

Alguna sugerencia para el margen derecho de un box con float:left?

Código:

<!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" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body{
 height: 100%;
 font-family: Arial, Helvetica, sans-serif;
}
body, #content, #seccion1, #seccion2, #seccion3, #seccion4 {
 padding:0px;
 margin:0px;
}
#content {
 height: 100%;
 background-color: #006600;
}
#seccion1 {
 height: 15%;
 background-color: #FFCC66;
}
#seccion2 {
 width: 235px;
 height:85%;
 background-color: #FF9999;
 float: left;
}
#seccion3 {
 height: 80%;
 background-color: #CCCCCC;
 
}
#seccion4 {
 height: 5%;
 background-color: #99CCCC;
} 
-->
</style>
</head>
<body scroll="no">
<div id="content">
  <div id="seccion1">Botones</div>
  <div id="seccion2">Arbol</div>
  <div id="seccion3">Cuerpo main </div>
  <div id="seccion4">Espacio disponible </div>
</div>
</body>
</html>

taar · #9 (**permalink**) 12/01/2006, 09:47

Cita:

lo probé en IE FF y opera y en IE se ve bien en FF y Opera no tanto porque sobrepasa...

Para ajustarlo tienes que agregar padding: 0 en html, body.

Código PHP:

  htm, bodyl { 
 height: 100%; 
 padding: 0; /* Opera */ 
}

Cita:

Solo otra pregunta más, la sección 2 tiene un float:left y me da en IE un margen como de un pixel es un Hack de IE 6. Como se lo quito ...

Puedes disminir el margin derecho de la seccion 2. Quedaria asi entonces:

Código PHP:

  #seccion2 { 
 width: 235px; 
 height:85%; 
 background-color: #FF9999; 
 float: left; 
  _margin-right: -3px;  /* solo IE */ 
}

stephen · #10 (**permalink**) 12/01/2006, 11:31

Gracias taar ya funciona bien

en IE

Un abrazo!