Imposta la dimensione della pagina HTML e la finestra del browser

Ho un elemento div con ID = "contenitore". Voglio impostare questo elemento come la dimensione dell'area visibile nella finestra del browser. Sto usando il seguente JS per farlo.Imposta la dimensione della pagina HTML e la finestra del browser

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

Tuttavia, le dimensioni della finestra del browser sono maggiori delle dimensioni visualizzabili e vengono visualizzate le barre di scorrimento orizzontale e verticale. Come faccio a fare in modo che la mia pagina HTML si adatti alla finestra del browser senza bisogno di barre di scorrimento?

EDIT:

sto chiedendo in sostanza, come posso fare il formato del documento lo stesso della dimensione finestra?

fonte

2012-03-01 moesef

Questo dovrebbe funzionare.

<!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>

I colori di sfondo sono lì in modo da poter vedere come funziona. Copia questo codice in un file e aprilo nel tuo browser. Prova a giocare un po 'con i CSS e guarda cosa succede.

Il width: inherit; height: inherit; estrae la larghezza e l'altezza dall'elemento padre. Questo dovrebbe essere predefinito e non è realmente necessario.

Provare a rimuovere il blocco CSS h1 { ... } e vedere cosa succede. Potresti notare che il layout reagisce in modo strano. Questo perché l'elemento h1 influenza il layout del suo contenitore. È possibile impedire ciò dichiarando overflow: hidden; sul contenitore o sul corpo.

Vorrei anche suggerirvi di leggere sullo CSS Box Model.

fonte

2012-03-01 05:48:32 twaddington

Era un elemento figlio di "contenitore" che mi dava problemi proprio come suggerivi tu. buona chiamata. Grazie! – moesef

È possibile utilizzare width: 100%; nel proprio css.

fonte

2012-03-01 03:59:12 yvoyer

provato. ancora rendendo la dimensione del documento più grande della dimensione del viewport. – 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>

fonte

2013-08-13 11:12:40

Imposta la dimensione della pagina HTML e la finestra del browser

risposta

Problemi correlati