web-dev-qa-db-fra.com

Comment obtenir une page pour qu'elle s'adapte automatiquement à une fenêtre?

Je viens de lancer mon premier site Web HTML pour un ami et je me demandais comment je pourrais obtenir que le site Web s'adapte à la page?

C'est une conception de paysage qui n'a pas besoin de défilement.

htmlcsswebresize
20
JoeJoe2416

Vous devez définir body et html sur position:fixed; , puis définissez right: , left: , top: , et bottom: à 0;. De cette façon, même si le contenu déborde, il ne dépassera pas les limites de la fenêtre.

Par exemple:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

JS Fiddle Exemple

Mise en garde : si vous réduisez la taille de la fenêtre de l'utilisateur, le contenu sera coupé.

16
JSW189

Si c'est dans un paysage, vous aurez besoin de plus de largeur et moins de hauteur! C'est exactement ce que tous les sites Web ont.

Laisse aller avec une base d'abord puis le reste!

Le CSS de base:

En CSS, vous pouvez le faire,

#body {
width: 100%;
height: 100%;
}

Ici, vous utilisez un div avec id body, comme:

<body>
  <div id="body>
    all the text would go here!
  </div>
</body>

Ensuite, vous pouvez avoir une page Web avec une hauteur et une largeur de 100%.

Et s'il essaye de redimensionner la fenêtre?

Les problèmes apparaissent, et s'il essayait de redimensionner la fenêtre? Ensuite, tous les éléments à l'intérieur de #body Essaieraient de gâcher l'interface utilisateur. Pour cela, vous pouvez écrire ceci:

#body {
height: 100%;
width: 100%;
}

Et ajoutez simplement min-heightmax-heightmin-width Et max-width.

Ainsi, l'élément de page resterait à l'endroit où il se trouvait au chargement de la page.

tilisation de JavaScript:

En utilisant JavaScript, vous pouvez contrôler l'interface utilisateur, utilisez jQuery comme:

$('#body').css('min-height', '100%');

Et toutes les autres propriétés CSS restantes, et JS se chargera de l'interface utilisateur lorsque l'utilisateur tente de redimensionner la fenêtre.

Comment ne pas ajouter défiler à la page Web:

Si vous n'essayez pas d'ajouter un parchemin, vous pouvez utiliser ce JS.

$('#body').css('min-height', screen.height); // or anyother like window.height

De cette façon, le document aura une nouvelle hauteur chaque fois que l'utilisateur voudra charger la page.

La deuxième option est préférable, car lorsque les utilisateurs ont différentes résolutions d'écran, ils souhaitent créer une feuille de style ou CSS pour leur propre écran. Pas pour les autres!

Astuce: Essayez donc d'utiliser JS pour trouver la taille actuelle de l'écran et éditer la page! :)

11
Afzaal Ahmad Zeeshan

vous pouvez utiliser css pour le faire par exemple

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>
6
user1825286