¿Cómo hacer que un cuadro complete una página web completa en todos los navegadores?

Hice una página web con el siguiente código y lo visualicé en Google Chrome.¿Cómo hacer que un cuadro complete una página web completa en todos los navegadores?

<html> 
<head> 
     <style type="text/css"> 
       html {padding:30px; background-color:blue;} 
       body {margin:0px; background-color:red;} 
     </style> 
</head> 
<body> 
hello world 
</body> 
</html>

El resultado es lo que esperaba, un cuadro rojo con un borde azul de 30 píxeles que ocupa toda la ventana del navegador web. Sin embargo, cuando lo veo en Firefox, el cuadro rojo es solo el alto de una altura de línea. En IE8, no hay un borde azul.

¿Cómo hago para que Firefox e IE8 muestren lo mismo que lo que veo en Google Chrome?

Notas adicionales Intenté agregar diferentes etiquetas doctype a la página, pero eso solo lo hizo aparecer como Firefox, es decir, el 1 de altura de línea de color rojo.

Fuente

2011-10-26 John

Para esto, creo que debes recurrir al posicionamiento absoluto o relativo; de lo contrario, su combo de altura/margen empujará la línea azul inferior fuera de la pantalla. Esto funciona como navegador cruzado para este caso simple. Espero que funcione para su caso de uso más complicado.

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { background:blue; } 
     .first{ 
     position:absolute; /* fixed also works */ 
     background:red; 
     top:30px; 
     left:30px; 
     right:30px; 
     bottom:30px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="first">hello world</div> 
    </body> 
</html>

Fuente

2011-10-26 14:10:07 scottheckel

si entiendo que correctamente, ajuste el ancho de cuerpo HTML & a 100%, 100% de altura

http://jsfiddle.net/Diezel23/Lv6Vw/#base

Fuente

2011-10-26 13:55:02

http://jsfiddle.net/Diezel23/Lv6Vw/#base –

No creo que exactamente hace porque no ve el borde azul en la parte inferior. – scottheckel

Se podría añadir un div adicional:

<html> 
    <head> 
     <style> 
      body { 
       padding: 30px; 
       margin: 0px; 
      } 
      div { 
       width: 100%; 
       height: 100%; 
       background-color: blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      ABC 
     </div> 
    </body> 
</html>

Fuente

2011-10-26 13:56:46 NCode

¿Cómo hacer que un cuadro complete una página web completa en todos los navegadores?

Respuesta

Cuestiones relacionadas