Establecer el tamaño de la página HTML y la ventana del navegador

Tengo un elemento div con ID = "contenedor". Quiero configurar este elemento para que sea del tamaño del área visible en la ventana del navegador. Estoy usando el siguiente JS para hacerlo.Establecer el tamaño de la página HTML y la ventana del navegador

var container= document.getElementById("container"); 
container.style.height=(window.innerHeight); 
container.style.width=window.innerWidth;

Sin embargo, el tamaño de la ventana del navegador es más grande que el tamaño visible aparecen y barras de desplazamiento horizontal y vertical. ¿Cómo lo hago para que mi página HTML se ajuste a la ventana del navegador sin necesidad de barras de desplazamiento?

EDIT:

básicamente me pregunto, ¿cómo puedo hacer que el tamaño del documento el mismo que el tamaño de la ventana?

Fuente

2012-03-01 moesef

Esto debería funcionar.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello World</title> 
     <style> 
      html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding: 0; 
       background-color: green; 
      } 
      #container { 
       width: inherit; 
       height: inherit; 
       margin: 0; 
       padding: 0; 
       background-color: pink; 
      } 
      h1 { 
       margin: 0; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <h1>Hello World</h1> 
     </div> 
    </body> 
</html>

Los colores de fondo están ahí para que pueda ver cómo funciona esto. Copie este código en un archivo y ábralo en su navegador. Intenta jugar un poco con el CSS y observa qué sucede.

El width: inherit; height: inherit; extrae el ancho y la altura del elemento principal. Este debe ser el predeterminado y no es realmente necesario.

Intente eliminar el bloque CSS h1 { ... } y vea qué sucede. Puede notar que el diseño reacciona de una manera extraña. Esto se debe a que el elemento h1 está influyendo en el diseño de su contenedor. Puede evitar esto declarando overflow: hidden; en el contenedor o el cuerpo.

También le sugiero que lea un poco en el CSS Box Model.

Fuente

2012-03-01 05:48:32 twaddington

Era un elemento secundario de "contenedor" que me estaba dando problemas como sugirió. buena llamada. ¡Gracias! – moesef

Puede usar width: 100%; en su css.

Fuente

2012-03-01 03:59:12 yvoyer

intentado. sigue haciendo que el tamaño del documento sea más grande que el tamaño de la ventana gráfica. – moesef

<html> 
<head > 
<title>Welcome</title>  
<style type="text/css"> 
#maincontainer 
{ 
top:0px; 
padding-top:0; 
margin:auto; position:relative; 
width:950px; 
height:100%; 
} 
    </style> 
    </head> 
<body> 
<div id="maincontainer "> 
</div> 
</body> 
</html>

Fuente

2013-08-13 11:12:40

Establecer el tamaño de la página HTML y la ventana del navegador

Respuesta

Cuestiones relacionadas