Css couches d'arrière-plan et div 100% hauteur

Imaginez le code suivant.Css couches d'arrière-plan et div 100% hauteur

<body id="first_bg_layer"> 
    <div id="second_bg_layer"> 
    <div id="third_bg_layer"> 
    </div> 
    </div> 
</div>

Chaque couche a un fond différent qui est statique/répété pour obtenir l'effet désiré. J'ai besoin de toutes les couches pour remplir l'écran, sinon l'arrière-plan sera brisé. L'arrière-plan est divisé en couches pour minimiser les tailles d'image.

La définition de min-height à 100% ne fonctionne pas pour diverses raisons. Est-ce qu'il y a un moyen de faire ça?

Éditer: Si je définis #second_bg_layer à hauteur: 100% et #third_bg_layer à min-height: 100%, cela fonctionne. Mais alors #second_bg_layer est verrouillé à 100% et ne sera plus développé.

Ce que je veux faire est de définir la hauteur minimale sur div, ou une autre solution.

Source

2010-04-14 Znarkus

Avez-vous défini la hauteur HTML et BODY à 100% avec 0 marges? Si ce n'est pas le cas, faites-le, si c'est le cas, assurez-vous que vos éléments div sont correctement positionnés.

Source

2010-04-14 07:42:08 Kyle

Ce n'est pas mon problème, s'il vous plaît voir le modifier :) – Znarkus

Avez-vous un exemple vivant, nous pouvons jeter un oeil à? – Kyle

Si vous n'êtes tout simplement pas obtenir une pleine largeur et la hauteur hors de la zone du corps, alors peut-être ce que vous demandez est le suivant:

html, body { 
    height: 100%; width: 100%; 
} 

/* And perhaps adding this if you're not using any reset CSS */ 
html, body { 
    margin: 0; padding: 0; 
}

Si ce ne est pas, je ne sais pas ce que vous ont des problèmes avec, mais une image de fond ne peut pas être affichée en dehors de l'élément sélectionné. Si vous voulez différencier le calque d'arrière-plan du calque lui-même, je vous suggère d'utiliser un div additionnel qui a la largeur/hauteur: 100%; position: absolue; en haut/à gauche: 0; et arrière-plan: url (...); pour tenir l'image d'arrière-plan.

Source

2010-04-14 07:42:09 Simeon

Ce n'est pas mon problème, s'il vous plaît voir la modification :) – Znarkus

est un truc que j'ai lu il y a quelque temps, et appliqué comme on le voit ci-dessous, si je me souviens bien ... Comme l'a dit juste au-dessus par d'autres pour la première partie, je mis:

html, body {html hauteur: 100%;}

Ensuite, une div contenant tout le contenu. Une sorte de wrapper si vous voulez l'appeler ainsi.

... div class que j'aurais défini {height: 100%; min-height: 100%;} Dans sa classe ou son ID.

Mais malheureusement IE ne supporte pas les min-height, ni la hauteur: auto, donc ...

vient de mettre d'abord la ligne de cas IE: {height: 100%;}

puis le css qui s'appliquera à d'autres navigateurs:

html> whatever_the_div_class corps {height: auto; min-height: 100%;}

Enfin, faire un div bas de page pour le mettre en dehors de cette div wrapper, juste après, auquel vous ajouterez les propriétés css:

hauteur 1%; clear: both (1% est comme cela arrive souvent, IE a besoin d'un « espace » ou fera des choses étranges)

Eh bien, espérons qu'il aide :)

Source

2010-04-14 12:30:55

Css couches d'arrière-plan et div 100% hauteur

Répondre

Questions connexes