28172 sujets

CSS et mise en forme, CSS3

[Résolu] Footer à hauteur variable

Bonjour,

J'ai créé une mise en page à 3 colonnes avec un footer, qui reste toujours en bas des trois colonnes quelque soit la hauteur de la colonne principale (qui varie). Jusqu'ici tout va bien, mais mon problème vient sur la page d'accueil, où le contenu de la colonne principale est petit et où il n'y a pas de scroll... Dans ce cas, mon footer se place bien en bas de la page, mais j'aimerais qu'il se continue jusqu'en bas de l'écran... Une idée de comment réaliser ça ??


Merciiiiiiiii Smiley confused
Modifié par warion (07 May 2010 - 16:53)
Bonjour.
Techniquement, ça n'est pas faisable. Après, en fonction de l'architecture de ta page, il peut être possible de "tricher" pour faire comme si ton footer prenait la place restante.
Donne-nous un lien ou ton code source. Smiley sourire
Erff Smiley decu


Voilà le code (sans le contenu des div mais c'est pas important j'imagine ^^)

<body>

<div id="big_wrap">

<!-- header -->	
<?php include('modules/header.html'); ?>

  <div id="global">
    
        <div id="col_gauche">

        </div>
        <div id="col_droite">
        
        </div>

   	<div id="page_principale">
        </div>

        <div id="footer">
        </div>
        
  </div>
</div>

</body>



Et le CSS

#big_wrap {
	margin-left:auto;
	margin-right:auto;
	height:100%;
	width:970px;
	background-color:#33333b;
}

#global {
	margin-left: auto;
	margin-right: auto;
	width:970px;
	background-color:#FFFFFF;
	margin-top:0;
}

#col_gauche {
	float:left;
	position:relative;
	width: 280px;
	min-height:395px;
	
}

#col_droite {
	float:right;
	position:relative;
	min-height:395px;
	width: 280px;
}

#page_principale {
	float:left;
	position:relative;
	left:0px;
	width:410px;
	padding-top:25px;
	text-align:left;
}

#footer {
	position:relative;
	width: 970px;
	min-height:200px;
	background-color:#33333b;
	clear:both;
}
J'imagine que tu voudrais centrer le contenu du footer, également, et non simplement l'étendre ?

Petite remarque en passant : il n'est pas utile de préciser que les blocs sont en position relative si tu ne les déplaces pas avec top, left, etc. (0 étant leur valeur par défaut). Smiley cligne
De rien, ajoutes quand même une condition à son appel > Si la position du footer est inférieure à la taille de la fenêtre - 200px ...
Bien qu'avec min-height, y'a des chances que ce passe quand même...
Sujet clos
Aller à