Définissez la taille de la page HTML et de la fenêtre du navigateur

J'ai un élément div avec ID="conteneur". Je veux mettre cet élément à la taille de la zone visible dans la fenêtre du navigateur. Je suis l'aide de la suite de JS pour ce faire.

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

Toutefois, le navigateur taille de la fenêtre est plus grande que la surface visible et horizontal et vertical des barres de défilement apparaissent. Comment puis-je faire pour que ma page HTML s'inscrit dans la fenêtre du navigateur, sans le besoin pour les barres de défilement?

EDIT:

Je suis fondamentalement demander, comment puis-je faire de la taille du document le même que la taille de la fenêtre?

OriginalL'auteur moesef | 2012-03-01

  1. 21

    Cela devrait fonctionner.

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

    Les couleurs de fond sont là pour que vous puissiez voir comment cela fonctionne. Copiez ce code dans un fichier et l'ouvrir dans votre navigateur. Essayez de jouer avec les CSS un peu et voir ce qui se passe.

    La width: inherit; height: inherit; tire la largeur et la hauteur de l'élément parent. Cette devrait par défaut et n'est pas vraiment nécessaire.

    Essayez de supprimer le h1 { ... } CSS bloc et voir ce qui se passe. Vous remarquerez peut-être la mise en page réagit dans une drôle de façon. C'est parce que le h1 élément qui influe sur la mise en page de son conteneur. Vous pourriez éviter cela en déclarant overflow: hidden; sur le conteneur ou le corps.

    Je voudrais aussi vous suggère de faire un peu de lecture sur le Modèle de Boîte CSS.

    Il a été un élément enfant de "conteneur" qui me donnait questions, tout comme vous l'avez suggéré. bon appel. Merci!

    OriginalL'auteur twaddington

  2. 1

    Vous pouvez utiliser width: 100%; dans votre css.

    essayé. toujours en train de faire le document de taille plus grande que la taille de la fenêtre.

    OriginalL'auteur yvoyer

  3. 1
    <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>

    OriginalL'auteur Vikash pathak