altura de 100% en cromo

estoy teniendo problemas con un sidediv que no conseguirá la altura a 100% en cromo. Funciona bien en FF. Estoy usandoaltura de 100% en cromo

html, body { 

padding: 0px; 
width: 100%; 
height: 100%; 

} 

#div { 

    min-height: 100%; 
}

¿Por qué es eso?

Fuente

2010-06-26 andrei

No puede especificar las dimensiones de html y el cuerpo. html ni siquiera es un elemento de visualización, y el cuerpo contiene TODOS los elementos de la pantalla –

+14

@Jamie Wong: No es cierto, si no especifica html y body no puede obtener 100% de altura – Diadistis

@Diadistis Wrong Soy - http://www.webmasterworld.com/forum83/7559.htm como referencia –

Esto funciona perfecto para mí en todos los navegadores:

<!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>min-height test</title> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; background-color: gray; } 
    </style> 
</head> 
<body> 
    <div id="div">test</div> 
</body> 
</html>

¿Puede dar más detalles?

Editar

Aquí es la versión actualizada en base a la información proporcionada:

<!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>min-height test</title> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; } 
    .contents { height: 100%; width: 780px; margin-left: auto; 
       margin-right: auto; text-align: left; } 
    #right { float: left; width: 217px; min-height: 100%; background:#4b805b; } 
    </style> 
</head> 
<body> 
    <div class="contents"> 
     <div id="right">test</div> 
    </div> 
</body> 
</html>

Aún así todo se ve bien para Chrome, Firefox e IE8

Fuente

2010-06-26 15:36:01 Diadistis

no sé qué más agregar, esto es todo el código de seguridad del contenedor // ¡REALMENTE NO SABE CÓMO FORMAR EL CÓDIGO DE STACKOVERFLOW LO SIENTO! #derecho { \t flotador: izquierda; \t ancho: 217px; \t min-altura: 100%; \t \t background: # 4b805b; } y este es el cuerpo agujero/html html, body { \t padding: 0px; \t margin: 0px; \t altura: 100%; \t text-align: center; \t } cuerpo { \t font-family: "Tahoma CE", "Arial CE", "Helvetica CE", Tahoma, Arial, lucida, sans-serif; \t font-size: 12px; \t fondo: url (images/bk.jpg) repeat-x fixed; \t } – andrei

Por favor, edite su pregunta y proporcione una versión reducida del html. Lo que importa es su diseño html, no su CSS. – Diadistis

Realmente no puedo hacer eso, no he escrito el código (que es un desastre por cierto) solo soy el depurador (¿el hecho de que la barra lateral esté incluida a través de php tiene algo que ver con esto?) – andrei

De http://doctype.com/give-two-nested-divs-100-minheight:

El elemento hijo hereda la altura del contenedor padre sólo si es se especifica explícitamente. Pero min-height no es una especificación explícita de altura, por lo que la altura calculada es "auto" y no al 100%.

Fuente

2010-06-26 15:35:32 Sjoerd

Vaya, ¿así que la respuesta es establecer ** ** height ** y ** min-height ** a ** 100% **? ¿O solo ** altura ** y dejar ** min-height ** afuera? – harpo

Hay que especificar su padre con altura 100%, así como el niño de manera

html,body{ 
    height: 100%; 
} 
#div{ 
     min-height: 100%; 
    height: auto !important; 
    height: 100%; /*for IE*/ 
}

01 El

! Important se sobreponen a todas las demás reglas de altura. Intenta que no tengas problemas.

Fuente

2010-06-26 16:29:30 CarterMan

Tuve un problema similar, esto solucionó. Al menos pruébalo. No estoy seguro de por qué de repente tuve este problema cuando no estaba antes. – Kirk

Comprobar con código A continuación, el trabajo y la impresión de etiquetas bien para mí en virtud de la impresora de etiquetas Zebra GC420d:

<!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 charset="utf-8"> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div style="border: 0px solid red;"> 
    <table border="0" width="100%" align="center"> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo $name; 
    ?> 
    </td> 
    </tr> 
    <tr><td></td></tr> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo 'https://goo.gl/2QvRXf'; 
    ?> 
    </td> 
    </tr> 

    </table> 
    </div> 

    </body> 
    </html>

espero que ayude!

Fuente

2016-02-04 14:25:09

altura de 100% en cromo

Respuesta

Cuestiones relacionadas