Foros del Web » Creando para Internet » CSS »

El DOCTYPE y el height en CSS

Estas en el tema de El DOCTYPE y el height en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/01/2006, 19:54
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
Pregunta El DOCTYPE y el height en CSS

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>
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #2 (permalink)  
Antiguo 09/01/2006, 20:54
Avatar de Holden  
Fecha de Ingreso: enero-2002
Ubicación: Buenos Aires
Mensajes: 326
Antigüedad: 15 años, 10 meses
Puntos: 4
Yo estoy tras el mismo problema.
Por lo pronto lo mas cercano a solucionarlo es usar js...

<script type="text/javascript">
<!--
function redimensionar() {
if (navigator.appName != "Microsoft Internet Explorer") {
var altura = (window.innerHeight - 18);
document.getElementById('layerPpal').style.height = altura+'px';
} else {
document.getElementById('layerPpal').style.height = "100%";
}
}
//-->
</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
  #3 (permalink)  
Antiguo 10/01/2006, 10:51
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
Pregunta Aja

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 .
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #4 (permalink)  
Antiguo 10/01/2006, 11:10
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
prueba poniendo tambien esto en tu css:
html, body{
height: 100%;
}
  #5 (permalink)  
Antiguo 10/01/2006, 11:22
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
De acuerdo

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
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #6 (permalink)  
Antiguo 10/01/2006, 14:21
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
No funciono en Firefox

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
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
  #7 (permalink)  
Antiguo 10/01/2006, 18:30
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
Código PHP:
<!--
html /*solo esta funcionando en IE*/
 
height100%;

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%).
  #8 (permalink)  
Antiguo 10/01/2006, 20:03
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
De acuerdo

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>
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com

Última edición por stephen; 11/01/2006 a las 14:47
  #9 (permalink)  
Antiguo 12/01/2006, 09:47
 
Fecha de Ingreso: diciembre-2001
Ubicación: Asuncion
Mensajes: 143
Antigüedad: 16 años
Puntos: 1
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:
htmbodyl {
 
height100%;
 
padding0/* 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 {
 
width235px;
 
height:85%;
 
background-color#FF9999;
 
floatleft;
  
_margin-right: -3px;  /* solo IE */

  #10 (permalink)  
Antiguo 12/01/2006, 11:31
 
Fecha de Ingreso: noviembre-2003
Ubicación: Ciudad de México
Mensajes: 28
Antigüedad: 14 años, 1 mes
Puntos: 0
Gracias taar ya funciona bien en IE

Un abrazo!
__________________
Los estándares Web siempre causaran polémica
http://mxgaribay.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:26.