28172 sujets

CSS et mise en forme, CSS3

Footer toujours en bas, puis div sur toute la hauteur

Bonjour à tous ! J'ai fait quelque recherches, mais j'ai pas vraiment trouvé ce que je cherchais. Je m'explique avec une image, car ca serait compliqué.

http://img15.hostingpics.net/pics/803182Sanstitre.png

Coller un footer en bas je sais le faire depuis tout ce temps que je développe ^^. Mais franchement la je colle, 4 ans d'apprentissage qui s'effondrent :3. Il faudrait que mon corps soit sur toute la hauteur !

Mon code actuel, abrégé.

<body>
	<div id="site">
		<div id="la petite barre grise en haut [cligne]">
		</div>
		
		<div id="header">
			<div id="logo"></div>
		</div>
		
		<div id="corps">
			<div id="cadre_droite"></div>
			<div class="cadre">
			</div>
			<div class="cadre">
			</div>
			<div class="cadre">
			</div>
		</div>
		
		<div id="footer"></div>
	</div>
	</body>


Le CSS:


html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 background: url('pictures/ti_wallpaper.png') top center fixed;
 }
 
#site {
 position: relative;
 margin: 0 auto;
 min-height: 100%;
 }

#leheader & lelogo {
 [i]propriétés[/i]
 }

#corps {
 width: 1000px;
 margin: 0 auto;

 background-color: rgba(255, 255, 255, 0.1);
 border-left: 1px solid rgba(255, 255, 255, 0.2);
 border-right: 1px solid rgba(255, 255, 255, 0.2);
 }

#footer {
 position: absolute;
 bottom: 0; left: 0;
 width: 100%;
 height: 100px;
 background-color: black;
 }


Idée ? Merci !
Modifié par WorldFire (08 Oct 2012 - 23:02)
Bonjour,

Si tu veux une colonne qui s'étende sur toute la hauteur, il y a une méthode aussi simple que peu connue, beaucoup plus simple que les tailles en % : mettre ta colonne en position: absolute (on peut aussi le faire en position: relative ou en position: fixed) et lui attribuer une position top: npx et bottom: npx (ou autre unité).

La colonne s'étend alors sur toute la hauteur de la fenêtre entre ces deux positions. Ça marche aussi pour la largeur, avec left: xpx et right: xpx (ou autre unité).

Source: http://www.pompage.net/traduction/introduction-au-positionnement-css.

Bonne continuation.
SuperMerguez, je vois que tu as pas pris la peine de lire ce que j'ai écrit. Je sais positionner le footer ! Tu le vois sur mon image.
@WorldFire, navré j'ai lu en vitesse, mais ton titre de topic est pas clair...

Thierry a donc répondu à ta question
En fait, j'ai déjà utilisé la méthode du footer collé en bas. Mais maintenant, à l'intérieur de ce système, je voudrai en gros le refaire une deuxième fois si vous préférez. Et ainsi rallonger le corps et son footer jusqu'au deuxième footer.
Sujet clos
Aller à