IE6 "marco" diseño con 100% de altura y barras de desplazamiento

Quiero lograr un diseño simple "marco" con encabezado fijo, área de navegación izquierda fija y un área de contenido principal que llena el 100% del resto de la ventana gráfica con barras de desplazamiento si necesario. Mi mejor intento está debajo, pero cuando agrego suficiente contenido al div principal para forzar el desplazamiento, veo que la barra de desplazamiento se extiende debajo de la parte inferior de la ventana gráfica.IE6 "marco" diseño con 100% de altura y barras de desplazamiento

¿Qué estoy haciendo mal? ¿O qué está haciendo mal IE6 y cómo puedo solucionarlo?

NB Por favor, no recomiendo usar un navegador más reciente. Me encantaría pero no puedo.

Actualización 1 (por Matti y otros puristas!) - Tengo que vivir dentro de las limitaciones del mundo real de desarrollo de una aplicación web para la sede de un grupo que necesita ser visitada por los usuarios en más de 100 filiales, no todos se han actualizado a un navegador moderno. ¡Y a algunas subsidiarias les encantaría usar la incompatibilidad del navegador como una excusa para no usar la aplicación impuesta por la oficina central!

Actualización 2

Soy un desarrollador de aplicaciones, no un diseñador de páginas web, ya que es probable que obvia. Hasta la fecha he estado usando un DOCTYPE HTML 4.0 Transitional que creo que fuerza el modo peculiar en todas las versiones de IE. Sin embargo, recientemente traté de agregar el AjaxControlToolkit ModalPopupExtender, y esto daña mi diseño cuando se muestra la ventana emergente. Google sugiere que necesito utilizar XHTML 1.0 para solucionar este problema (AjaxControlToolkit no soporta el modo peculiaridades), y de hecho estoy muy feliz de pasar a limpio diseño basado en CSS, pero yo necesita mi diseño básico del marco para trabajar en IE6 .

<!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> 
    <title></title> 
    <style type="text/css"> 
    html, body 
    { 
     height:100%; 
     margin:0; 
     padding:0; 
     overflow:hidden; 
    } 
    div 
    { 
     border:0; 
     margin:0; 
     padding:0; 
    } 
    div#top 
    { 
     background-color:#dddddd; 
     height:100px; 
    } 
    div#left 
    { 
     background-color:#dddddd; 
     float:left; 
     width:120px; 
     height:100%; 
     overflow:hidden; 
    } 
    div#main 
    { 
     height:100%; 
     overflow:auto; 
    } 
    </style>  
</head> 
<body> 
    <div id="top">Title</div> 
    <div id="left">LeftNav</div> 
    <div id="main"> 
    Content 
    <p> 
    Lorem ipsum ... 
    </p> 
    ... repeated several times to force vertical scroll... 
     <table><tr> 
     <td>ColumnContent</td> 
     ... td repeated several times to force horizontal scroll... 
     <td>ColumnContent</td> 
     </tr></table> 
    </div> 
</body> 
</html>

Fuente

2010-05-18 Joe

uso de un navegador más reciente. –

@Matti - ¡Bájate de tu tribuna! Ya no dije que no puedo. – Joe

¡Nunca! ¡Esta tribuna es mi salvavidas! –

En mi respuesta anterior, estaba absolutamente equivocado (sin doble sentido), como no se puede especificar tanto top y bottom en IE6, ni tanto leftyright. Además, no conoce el ancho y la altura exactos del contenido div, ni los conoce como un porcentaje de la ventana gráfica.

Cuando resolví esto, puse IE en modo peculiar, para obtener el border-box box model (vea también W3C spec). Para utilizar las mismas reglas CSS para más estándares navegador compatible, puede utilizar la propiedad box-sizing (y variantes). Después de hacer esto, los bordes aparezcan dentro de los contenidos y se puede empujar el contenido hacia abajo y hacia la derecha mediante la especificación de una frontera (ancho y estilo):

<!-- put IE in quirks mode --> 
<!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> 
    <title>IE6 'frames'</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -khtml-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #top { 
     position: absolute; 
     top: 0; 
     width: 100%; 
     background-color: #ddd; 
     height: 100px; 
     z-index: 2; 
    } 

    #left { 
     position: absolute; 
     left: 0; 
     border-top: 100px solid; /* move everything below #top */ 
     background-color: #bbb; 
     width: 120px; 
     height: 100%; 
     overflow: hidden; 
     z-index: 1; 
    } 

    #main { 
     position: absolute; 
     border-top: 100px solid; 
     border-left: 120px solid; 
     width: 100%; 
     height: 100%; 
     overflow: auto; 
    } 
    </style>  
</head> 
<body> 
    <div id="top">Title</div> 
    <div id="left">LeftNav</div> 
    <div id="main"> 
    <p> 
     Lorem ipsum ...<br /> 
     <!-- just copy above line many times --> 
    </p> 
    </div> 
</body> 
</html>

ACTUALIZACIÓN: En IE> = 7 y más estándares compatibles con los navegadores se pueden utilizar junto con position: fixed tanto top y bottom (et al.) reglas. Hay una manera de conseguir esta apariencia de marco en IE6 en modo estándar (o más bien, Almost Standards Mode) usando CSS expressions. De esta forma, puede dejar que el motor de JScript calcule los valores correctos de ancho y alto (agregados entre comentarios condicionales).

<!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> 
    <title>'Frames' using &lt;div&gt;s</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #top, #left, #main { 
     position: fixed; 
     overflow: hidden; 
    } 

    #top { 
     top: 0; 
     width: 100%; 
     background-color: #ddd; 
     height: 100px; 
    } 

    #left { 
     left: 0; 
     top: 100px; /* move everything below #top */ 
     bottom: 0; 
     background-color: #bbb; 
     width: 120px; 
    } 

    #main { 
     top: 100px; 
     left: 120px; 
     bottom: 0; 
     right: 0; 
     overflow: auto; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style> 
    #top, #left, #main { 
     position: absolute; 
    } 

    #left { 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
    } 

    #main { 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
     width: expression((m=document.documentElement.clientWidth-120)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="top">Title<br /></div> 
    <div id="left">LeftNav<br /></div> 
    <div id="main"> 
    <p> 
     Lorem ipsum ...<br /> 
     <!-- just copy above line many times --> 
    </p> 
    </div> 
</body> 
</html>

Dicho esto, no recomiendo este método. Se ralentizará notablemente la experiencia de navegación del IE6 que ya no es demasiado rápido, como these expressions are evaluated many times.

Solo una nota adicional: supongo que usará hojas de estilo externas (y scripts) al final, pero si desea insertarlas dentro de un documento XHTML, use "Marcadores CDATA y comentarios apropiados para el guión o estilo lenguaje utilizado ", como David Dorward recommends.

Fuente

2010-05-18 14:49:31

+1 funciona en modo peculiar. Sin embargo, quiero evitar el uso del modo peculiar - ver la actualización de mi pregunta. es posible? – Joe

Esta es la única respuesta hasta ahora que proporciona exactamente el renderizado que quiero, pero solo funciona en modo peculiar. Estoy luchando por obtener el mismo efecto en el modo estándar incluso cuando uso IE8. ¿Tiene una versión de esto que funciona en IE8 en modo estándar, incluso si no se procesa correctamente en IE6? – Joe

Excelente, su ayuda es muy apreciada. Asumiendo que es imposible en IE6 en modo estándar, me gustaría obtener la mejor aproximación posible en el modo de estándares IE6. Por ejemplo, si es necesario, supongo que tendré que aceptar que todo el cuerpo se desplaza en IE6 si el contenido es demasiado ancho o alto. Si me puedes mostrar cómo hacerlo, te lo agradecería, pero también me iré usando tu segunda versión como punto de partida. – Joe

Este html debería darte un poco de ayuda, pero probablemente tengas que jugar con él para que funcione perfectamente en ie6 (lo siento, no puedo probar en ie6 en este momento). El problema está sucediendo porque en realidad hay una barra de desplazamiento que aparece en el html y el cuerpo donde tiene el desbordamiento: oculto especificado. Puede quitarlo y establecer el desbordamiento en automático para ver realmente que ocurre.

<!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> 
    <style type="text/css"> 
     html 
     { 
      height:100%; 
     } 
     body 
     { 
      height:100%; 
      margin:0px; 
      padding:0px; 
      border-left:0px; 
      border-right:0px; 
      overflow:hidden; 
     } 
     #header 
     { 
      top:0px; 
      width:100%; 
      height:100px; 
      background-color:#dddddd; 
      position:absolute; 
     } 
     #content 
     { 
      top:100px; 
      bottom:0px; 
      width:100%; 
      overflow:auto; 
      position:absolute; 
     } 

     #wrapper 
     { 
     padding-left:125px; 
     } 

     div#left 
    { 
     background-color:#dddddd; 
     float:left; 
     width:120px; 
     height:100%; 
     overflow:hidden; 
    } 
    </style> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="left"></div> 
    <div id="content"> 
    <div id="wrapper"> 
    <p>content</p> 
    <p>content</p> 
    </div> 
</div> 
</body> 
</html>

Fuente

2010-05-18 16:27:25 Ben

"en realidad hay una barra de desplazamiento que aparece en el html y el cuerpo" - Puedo ver que cuando uso el desbordamiento: automático. ¿Hay alguna manera de eliminarlo? – Joe

Esto no funciona en IE8: el área de contenido se extiende más allá del lado derecho de la ventana gráfica. – Joe

... Además del comentario anterior: obtengo resultados diferentes con IE8 en dos máquinas diferentes, sospecho que se debe a la forma en que se configura IE8. En mi máquina doméstica, el desplazamiento vertical funciona bien siempre que el contenido no sea demasiado ancho. Pero todavía tengo problemas con el desplazamiento horizontal con un contenido amplio (por ejemplo, una tabla ancha). En el trabajo, no funciona en absoluto: voy a mirar más de cerca la configuración del navegador mañana. – Joe

http://www.cssplay.co.uk/layouts/frame.html

Fuente

2010-05-18 17:25:45 reisio

Se parece mucho a lo que quiero. Mañana jugaré con él y veré si puedo descifrar cuáles son los bits más sobresalientes que necesito extraer. – Joe

+1 por el buen bit de CSS virtuoso, pero al final no hace lo que necesito. El área de contenido tiene columnas de ancho fijo: en mi caso, tengo una aplicación que puede tener un amplio contenido (por ejemplo, una tabla con muchas columnas), y necesito desplazamiento horizontal en este caso. – Joe

IE6 "marco" diseño con 100% de altura y barras de desplazamiento

Respuesta

Cuestiones relacionadas