28172 sujets

CSS et mise en forme, CSS3

[Résolu] Fond position absolu et scroll

Bonjour,

Je suis bloqué sur quelque chose :


<div id="fond"></div>

<div id="site">
   <p>Contenu</p>
   <p>Contenu</p>
   <p>Contenu</p>
   <p>Contenu</p>
   <p>Contenu</p>
   <p>Contenu</p>
   <p>Contenu</p>
</div>


J'aimerais mettre un background à #fond qui fait toute la page, je fais donc :


* {
    margin: 0;
    padding: 0;
}

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

#fond {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

#site {
   position: relative;
}


Ma div #fond couvre bien toute ma page, mais que la partie visible, si je réduit ma fenêtre pour avoir un scroll, la div ne couvre plus la partie qui a été scroller...
J'ai essayer de mettre un "min-height: 100%;" à #fond, rien ni fait...

Comment faire pour que ma div couvre toute ma page même avec un scroll ?

Merci d'avance
Modifié par Blogger (20 Apr 2010 - 17:52)
Salut, Smiley cligne

Cette fois-ci, je vais poser une question pour être sûr.

Tu parles du scroll vertical ? Si tu mets beaucoup de contenu dans #site jusqu'à avoir la scrollbar, #fond ne le prend pas en compte (il se limite à la hauteur du viewport), c'est bien ça ?
Salut, ou plutôt "re" Smiley biggrin ,

Oui c'est bien ça, je parle du scroll vertical (celui de droite), oui si je met beaucoup de contenu ou si je réduit ma fenêtre, oui #fond se limite à la hauteur du viewport.
Hop !
<body>
	<div id="full_height">
		<div id="fond"></div>
		<div id="site"></div>
	</div>
</body>
html, body {
height:100%; }

div#full_height {
position:relative;
min-height:100%; }
Le min-height:100% ne peut pas être utilisé sur <body>, d'où l'utilité de #full_height.

A bientôt. Smiley cligne
@pfoofen : Parce cette div #fond sera caché pour un effet javascript, donc faut quelle ait des div enfant.

@BeliG : Ta technique fonctionne, mais en mettant ma div #fond en position: absolute, ça ne fonctionne plus...ta une autre idée ?

Merci d'avance.
Blogger a écrit :
@BeliG : Ta technique fonctionne, mais en mettant ma div #fond en position: absolute, ça ne fonctionne plus...ta une autre idée ?
Mais si ça marche, fais voir ton code complet.

    <div id="full_height">
        <div id="fond"></div>

        <div id="site">
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
            <p>Contenu</p>
        </div>
    </div>




* {
    margin: 0;
    padding: 0;
}

html, body {height: 100%;}

#full_height {
    position: relative;
    min-height: 100%;
}

#fond {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

#site {
    position: absolute;
}


Réduit la fenêtre, pour avoir un scroll, et scroll pour voir le résultat.
Et alors ?

Les éléments en absolu se réfèrent au premier ancêtre positionné. Du coup, ça fonctionne aussi si tu utilises position:relative. Smiley cligne
Modifié par BeliG (20 Apr 2010 - 17:09)
J'ai essayer en mettant une nouvelle div dans #site :


<div id="site">
   <div id="content">
       <p>Content</p>
       <p>Content</p>
       <p>Content</p>
       <p>Content</p>
       <p>Content</p>
       <p>Content</p>
   </div>
</div>


et ce code CSS :


#site {
    position: relative;
}

#content {
    position: absolute;
}


Et ça ne fonctionne pas, décidément j'ai des lacunes avec ces positions...
Modifié par Blogger (20 Apr 2010 - 17:29)
Regarde comment tu écris position. Smiley rolleyes

De plus, il manque top/bottom et left/right (sinon le positionnement absolu ne fonctionne pas correctement).
Oups, j'ai écris faux ici, mais dans le code c'était juste chez moi, je corrige ça.

On dois toujours les mettre les 4 (top, ...) ? ou 1 suffit ? dans tout les cas on doit minimum en mettre un ?

Que pour le position: absolute ? ou aussi pour le position: relative ?

Merci
- Pour le positionnement absolu : il faut deux propriétés, une pour le positionnement horizontal (left ou right) et une pour le positionnement vertical (top ou bottom).

- Pour le positionnement relatif : ces propriétés sont facultatives. Elles peuvent te permettre de décaler un élément par rapport à sa position initiale dans le flux. Là par contre c'est au choix, soit tu n'utilises qu'une propriété (left ou right ou top ou bottom), soit deux (une pour l'axe vertical et une pour l'axe horizontal).

Je te conseille vivement ces articles :
Initiation au positionnement CSS : flux et position relative
Initiation au positionnement CSS : position absolue et fixe
Merci, j'ai trouvé une solution en ne plaçant pas tout mes élément en absolu...c'est plus simple...

Je vais aller lire ces articles, j'en ai besoin^^

Merci pour l'aide, et à bientôt surement Smiley cligne
Sujet clos
Aller à