Je souhaite créer une disposition de largeur fixe où la couleur d'arrière-plan de chaque côté de la page est différente, mais avec les couleurs de fond s'étendant infiniment de chaque côté de la page, peu importe la distance effectuée.
Par exemple, je ne cherche pas à créer une image px 9000x10 avec les couleurs correctes de chaque côté et de la carrelage, car cela ne fonctionnerait que si vous ne faites pas zoomer assez loin pour voir le bord de l'image de fond. < / p>
est-ce possible?
Merci!
J'aurais dû spécifier, l'arrière-plan doit couvrir la hauteur totale de la page, pas seulement la hauteur de la fenêtre / la fenêtre.
5 Réponses :
Comment va ceci pour vous? http://jsfiddle.net/pnyve/
Si le contenu est grand et que le rouleau vertical apparaît, l'arrière-plan n'étirera pas à la fin. Exemple: jsfiddle.net/dan86/pnyve/2
Ah, qu'est-ce que Dan a dit. J'en ai besoin aussi. : /
Il suffit de changer de absolu à fixe . Il semble fonctionner de cette façon. jsfiddle.net/jztdf
Utilisation d'exemple Matt, il suffit d'ajouter un conteneur le résout: http://jsfiddle.net/pnyve/3/
Cela résout la question d'avoir trop de contenu. Mais essayez de supprimer une partie du contenu, l'arrière-plan rétrécira la taille du contenu et ne remplira pas la page XD.
Ce semble fonctionner:
Cela semble fonctionner, mais vous devriez noter que position: fixe n'est pas pris en charge dans IE6
Cela a un problème dans lequel vous pouvez voir 1px de l'arrière-plan violet où il devrait y avoir de jaune. (Dépend si le nombre de pixels de la largeur de la fenêtre de visualisation est pair ou impair) (test en chrome)
@THIRTTYDOT: Cela semble être réparé maintenant.
@Fred Nurk: Yup, c'est corrigé. Je pense que j'aime bien votre solution parce que cela ne dépend que sur un élément supplémentaire.
@Fred Nurk: Neat, mais malheureusement, cela ne fonctionne pas avec notre bon ami, c'est-à-dire.
Je sais que le texte est un médium médiocre pour le sarcasme, mais "bon ami" m'a presque fait renoncer au café.
Cela fonctionne dans IE7 + avec des deux petits et beaucoup de contenu:
Démo en direct (beaucoup de contenu)
Démo en direct (peu de contenu)
html: css:
Je n'ai pas aimé la hauteur : 100%; Position: corrigé; code> solution parce que je voulais laisser l'option ouverte d'une image de fond qui défile avec la page plus tard. (Bien que je ne pensais pas à cela en écrivant la question.) J'avais une pièce de théâtre et trouvée min-hauteur: 100%; code> fonctionner. <html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#container {
width: 100%;
min-height: 100%;
position: relative;
}
#left, #right {
width: 50%;
height: 100%;
position: absolute;
z-index: -1;
}
#left {
left: 0;
background-color: navy;
}
#right {
right: 0;
background-color: maroon;
}
#content {
width: 512px;
height: 100%;
margin: 0 auto;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content">
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
</div>
</div>
</body>
</html>