web-dev-qa-db-fra.com

Comment adapter la hauteur de la page Web à celle de l'écran

Je dois adapter la hauteur de ma page Web à la taille de l'écran sans faire défiler l'écran.

HTML

<body>
    <form id="form1" runat="server">
    <div id="main">
        <div id="content">

        </div>
        <div id="footer">

        </div>
    </div>
    </form>
</body>

CSS

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}
htmlcsshtml5css3
28
Joshua

Une solution autonome rapide, non élégante mais fonctionnelle, avec CSS en ligne et aucune exigence jQuery. Autant que je sache, cela fonctionne aussi avec IE9.

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
</body>
27
Claudix

Un positionnement fixe fera ce dont vous avez besoin:

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
23
Faust

Comme un autre gars l'a décrit ici , tout ce que vous avez à faire est d'ajouter

height: 100vh;

au style de tout ce dont vous avez besoin pour remplir l'écran

17
David Chu

Ne donnez pas des hauteurs exactes, mais des hauteurs relatives, totalisant 100%. Par exemple:

  #content {height: 80%;}
  #footer {height: 20%;}

Ajouter à

 html, body {height: 100%;}
4
Bakabaka

Essayer:

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}

(77% et 22% préservent grossièrement les proportions de content et footer et ne doivent pas causer de défilement)

0
Gordon Bailey

vous pouvez utiliser css pour définir la balise body sur ces paramètres:

body
{
padding:0px;
margin:0px;
width:100%;
height:100%;
}
0
ram