Comment est-il possible de construire un site web d'une page avec des pages différentes avec 100% de largeur et 100% de hauteur? Ma première solution serait une valeur fixe mais je veux la faire évoluer à la taille de l'écran. Alors que chaque page a la taille de l'écran. Notez qu'il doit s'agir d'une "page unique" pour que les pages soient les unes au-dessous des autres.pages toujours 100% hauteur et 100% largeur
Merci pour votre aide!
Ceci est le code dont vous avez besoin:
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; }
#parent { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#parent div { height: 100%; width: 100%; }
#parent div:nth-child(1) { background: red; }
#parent div:nth-child(2) { background: green; }
#parent div:nth-child(3) { background: blue; }
#parent div:nth-child(4) { background: orange; }
</style>
</head>
<body>
<div id="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Les divs à l'intérieur du # parent ont tous une hauteur de 100%. Même si vous redimensionnez l'écran. Testé sur Chrome, IE et Firefox.
C'est exactement ce que je cherchais! Merci beaucoup monsieur! – Tbmluijten
Aucun problème :) pourriez-vous le marquer comme réponse acceptée en cliquant sur le "vérifier" signe? aiderait les autres avec le même problème Merci –
Bien sûr, je le ferai ;-) – Tbmluijten
Dépend de la façon dont vous voulez le construire et le redimensionner. Est-ce réactif? Si c'est le cas, assurez-vous d'utiliser un framework qui le supporte.
En outre, commencer comme suit dans votre CSS
body, html {height: 100%;width: 100%;}
Ce sera toujours remplir votre écran pour 100% avec le corps. Maintenant pour votre question secondaire. Vous voulez remplir chaque page? Parce que tu m'as perdu là-bas. Le contenu est varriable, donc ne peut toujours tenir sur une hauteur et largeur de 100% (pensez aux smartphones, vous devez parfois faire défiler, en raison de la largeur et la hauteur en pixels d'un smartphone)
Je suggère que vos pages soient des sections et placez-les dans mon étiquette de corps. Chaque section est alors un élément différent et vous pouvez les appeler à partir de votre menu (je suppose que vous voulez faire défiler puis descendre dans votre menu) donc simplement leur donner un ID et la page va sauter à l'aide de JQuery ou JavaScript.
Faites un Codecheck sur cette page pour voir ce que je veux dire: http://www.jellyfishwebdesign.nl/Joost/index.php
Donnez height:100% à html, body & votre conteneur page .
Je pense que cette solution CSS est assez ..
<body>
<section id="one">
</section>
<section id="two">
</section>
<section id="three">
</section>
</body>
Et le CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
#one {
min-height:100%;
position:relative;
}
#two {
min-height:100%;
position:relative;
}
#three {
min-height:100%;
position:relative;
}
Ce que vous demandez n'est pas clair. Demandez-vous si c'est possible? Oui, ça l'est. Mais qu'est-ce que vous * voulez vraiment savoir? – doctororange
Comment «une page» peut-elle correspondre à 100% de la hauteur de la fenêtre du navigateur? – Justinas
Vous voulez un site d'une page sur plusieurs pages? Et votre souci est avec la hauteur et la largeur? – Anthony