28172 sujets

CSS et mise en forme, CSS3

Div height 100% et plus !

Bonjour,

Je viens demander de l'aide car j'ai épluché le web, je suis tombé sur pleins de sites
dont le votre, j'ai tout essayé mais impossible de trouver une solution.

Le problème, des pages à contenu variable des fois très peu et d'autres fois beaucoup.

Quand le contenu est faible, il faudrait que le site soit étiré à 100% de haut, quand
le contenu est long il faut que le site s'étire selon la longueur du contenu.

Voici une illustration du site :
http://img522.imageshack.us/img522/9757/61773770.gif

La structure doit être ainsi, avec le bandeau en haut le contenu au milieu et le pied
de page toujours en bas, le petit arrondi se trouve toujours en bas aussi.

Donc j'ai testé plusieurs choses mon premier test :

HTML :


<div id="global">
    <div id="bandeau">blablabla...</div>
    <div id="centre">
        <div id="menu">blablabla...</div>
        <div id="contenu">blablabla...</div>
        <div id="autre">blablabla...</div>
    </div>
    <div id="pied">blablabla...</div>
</div>


CSS :
html, body {
	margin: 0;
	padding: 0;
	height: 100%
}

#global {
	width: 956px;
	height: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid red;
	background: #ededed url(images/arrondi.gif) bottom no-repeat;
}

#bandeau {
    width: 956px;
	height: 180px;
	background:	#3a3a3a;
}

#centre {
    width: 956px;
}

#menu {
	float: left;
    width: 180px;
	background:	#db8686;
}

#contenu {
	float: left;
    width: 565px;
	background:	#86b4db;
}

#autre {
    float: left;
	width: 211px;
	background:	#b2db86;
}

#pied {
	width: 956px;
	height: 50px;
	position: absolute;
	bottom: 0;
	background:	#9d9d9d;
}


Cette technique fonctionne très bien, le site s'affiche bien à 100% mais si le contenu est plus grand, on obtient cet effet :

http://img718.imageshack.us/img718/2205/14047733.gif

Comme on peut le voir, l'encadré rouge et la limite d'affichage à 100%, le div "centre" ne varie pas
en fonction du contenu, du coup le pied de page n'est pas en bas de la page et l'arrondi non plus.

Y a t'il une solution à mon problème ?

Merci,
Modifié par solofordoel (24 Feb 2010 - 23:45)
Salut et bienvenue,

As-tu pensé à aller faire un tour du côté des Gabarits Alsacréations, voir si tu n'y trouve pas ton bonheur ?

As-tu pensé à chercher dans les ressources "Apprendre" du site, où tu peux trouver ce genre d'article : Comment positionner un texte ou un bloc au bas d’un conteneur ? ?

beaucoup de questions étant récurrentes sur Alsacréations, il existe énormément de ressources qui y répondent, il est toujours bon d'aller y jeter un coup d'oeil en premier lieu. C'est souvent mieux expliqué que dans le forum où les gens répondent vite. Smiley cligne
C'est en effet la que j'ai trouvé pas mal d'infos mais aucune n'a pu résoudre mon problème !

Dans les gabarits justement le mien fait référence à celui ci :
Gabarit 11

Pour positioner le Bloc en bas du conteneur pareil j'ai appliqué la même chose d'ailleurs on le voit très bien dans la css !

C'est pour ça que j'écris sur le forum, car j'arrive vraiment pas à solutionner la chose !
Coucou,

je sais pas si cela fonctionne là je ne peux pas tester avec ton code mais je tenterais un clear:both sur ton pied de page

bon courage pour la suite
voilà ce que j'obtiens en supprimant position:absolute et en ajoutant clear:both dans ton pied

voici la petite image:

upload/26249-test1.jpg

Est ce que cela t'avance ?
Merci pour votre intérêt au sujet,

Quikers oui et non car je n'ais plus l'affichage 100% pour les pages dont le contenu
ne remplit pas la page.

Je vais étudier le lien Un design fluide avec trois «colonnes», grâce au positionnement flottant

Suggestions, si il y a solution et vu que pas mal de gens galère avec cette mise en page,
un nouveau gabarit pourrait être ajouté, parce que je suis allé voir direct là ?

Quikers a écrit :
voilà ce que j'obtiens en supprimant position:absolute et en ajoutant clear:both dans ton pied

voici la petite image:

upload/26249-test1.jpg

Est ce que cela t'avance ?

Modifié par solofordoel (24 Feb 2010 - 12:52)
bonjour moi je viens de tester sous chrome et firefox cela fonctionne mais après e sais pas sur quel navigateur tu fais tes tests donc avec un min_height:valeur en px; ça fonctionne mais après à toi de voir et de nous montrer des images de tes tests par exemple
Je teste sur plusieurs navigateur pour etre sur que le site passe bien partout.

Sur FF et Chrome ça marche peut-être mais sur IE7 / 8 ça marche pas et je pense
pas que je peux me passer de ces 2 là.
Hello Solofordoel,

Alors, dans ton global, il te faut au moins ça :

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

Et dans le center, ça avec le padding-bottom de la taille de ton pied de page

#centre
{
/* Pour éviter la superposition
du pied de page et du contenu : */
padding-bottom: 50px;
overflow: auto;
}

@+
Olivier
Modifié par diaboliv (27 Feb 2010 - 10:33)
Sujet clos
Aller à