web-dev-qa-db-fra.com

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

J'ai un élément div avec ID = "container". Je veux définir cet élément pour qu'il soit de la taille de la zone visible dans la fenêtre du navigateur. J'utilise le JS suivant pour ce faire.

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

Cependant, la taille de la fenêtre du navigateur est plus grande que la taille visible et des barres de défilement horizontales et verticales apparaissent. Comment puis-je faire en sorte que ma page HTML s'insère dans la fenêtre du navigateur sans avoir besoin de barres de défilement?

MODIFIER:

Je demande essentiellement, comment puis-je rendre la taille du document identique à celle de la fenêtre d'affichage?

htmlcssresizescrollbar
14
moesef

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 d'arrière-plan sont là pour que vous puissiez voir comment cela fonctionne. Copiez ce code dans un fichier et ouvrez-le dans votre navigateur. Essayez de jouer un peu avec le CSS et voyez ce qui se passe.

Le width: inherit; height: inherit; extrait la largeur et la hauteur de l'élément parent. Ceci devrait être la valeur par défaut et n'est pas vraiment nécessaire.

Essayez de supprimer le h1 { ... } Bloc CSS et voyez ce qui se passe. Vous remarquerez peut-être que la mise en page réagit de manière étrange. C'est parce que le h1 L'élément influence la disposition de son conteneur. Vous pouvez empêcher cela en déclarant overflow: hidden; sur le récipient ou le corps.

Je vous suggère également de faire quelques lectures sur le CSS Box Model .

21
twaddington

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

1
yvoyer
<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>
1
Vikash pathak