28220 sujets

CSS et mise en forme, CSS3

[Résolu] Insérer un vide qui rempli toute la hauteur

bonjour, je me heurte à un soucic les amis.

Voila je suis entrain de déveloper un site, et je m'appercois que quand ma page est pleinde de contenu, pas de soucis mais si il ya peu de texte, le bas de page se retrouve donc au milieu de la fenetre de mon navigateur (logique).

Je voudrais savoir si on peut ajouter une valeur en css pour que l'on remplisse le reste du texte par du vide afin que mon bas de page se retrouve bien en bas du navigateur. avec un height 100% j'ai des soucis car mon fond d'ecran blanc ne suit pas tout le texte quand celui -ci déborde en bas.

j'espere que vous avez compris ce que j'ai voulu dire Smiley decu
Modifié par Sk4pis0 (06 Dec 2005 - 12:04)
j'ai deja essayé mais apparement il ne le prend pas en compte

voici ma feuille de style, a ton avis a quel endroit doi-je la mettre?

/* CSS du site Sisteer */

		body
		{
			margin:  0 ;
			padding: 0 ;
			height: 100%;
			/*text-align: center ;*/
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: white;
		}/* caracteristiques principales de la page*/
		
		div#conteneur
		{
		position: relative;
		width: 770px;
		/*left: 50%;
		margin-left: -385px;*/
		left: 0px;
		height: 100%;
		text-align: left ;
		border-left: 1px solid orangered ;
		border-right: 1px solid orangered ;
		background: #fff ;
		}/*caractéristiques du cadre principal*/
		
		h1#header
		{
			position: relative;
			height: 131px ;
			margin: 0 ;
			background: url(banniere.jpg) ;
		}/*propriétés de la bannière*/
		
		/*------------------------------------------------------------------------ parametres de définition du cadre menu ------*/	
		
		dl, dt, dd, ul, li {
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		
		#menu {
		position: absolute;
		background: url(menu.jpg) repeat-x 0 -28px ;
		top: 131px;
		/*left: 0;*/
		}
		
		#menu dl {
		float: left;
		width: 110px;
		}/*parametres largeur des zones de liens*/
		
		#menu dt a{
		text-align:center;
		cursor: default;
		padding: 0 5px 0 5px;
		line-height: 28px ;
		font-size: 1.1em ;
		font-weight: bold ;
		color: #fff ;
		display: block ;
		text-decoration: none ;
		}/*parametres des liens*/
		
		#menu dt a:hover 
		{
		color: darkorange;
		background: transparent url(menu.jpg);
		}
		#menu dt a#menu1:hover
		{
			background-position: 0px 0px;
		}
		#menu dt a#menu2:hover
		{
			background-position: -110px 0px;
		}
		#menu dt a#menu3:hover
		{
			background-position: -220px 0px;
		}
		#menu dt a#menu4:hover
		{
			background-position: -330px 0px;
		}
		#menu dt a#menu5:hover
		{
			background-position: -440px 0px;
		}
		#menu dt a#menu6:hover
		{
			background-position: -550px 0px;
		}/*reglages du décalage pour le rollover*/
		
		
		
		#menu dd {
		display: none;
		border: 1px solid gray;
		}/*parametres des cellules de sous menus*/
		
		#menu li {
		text-align: center;
		background: #fff;
		}/*texte dans les sous-menus*/
		
		#menu li a{
		color: #000;
		text-decoration: none;
		display: block;
		height: 100%;
		}/*apparence des liens*/
		
		#menu li a:hover {
		background: #eee;
		}/*apparence des liens survolés*/
		
		/*------------------------------------------------------------------------ parametres de définition de la fenetre info de gauche ------*/
		
		div#gauche
		{
		position: absolute;
		background: gainsboro;
		margin-top: 100px;
		margin-left: 5px;
		width: 160px;
		height: auto;
		}/*paramètres du cadre optionnel de gauche*/
			
		div#head h1
		{
		height: 20px;
		background: url(menu.jpg);
		margin-top: 0px;
		color: orangered;
		padding-left: 5px;
		font-weight: bold;
		font-size: 1em ;
		}
		
		div#gauche p
		{
		text-align: justify;
		text-indent: 0.5em ;
		line-height: 1em ;
		margin: 3px;
		padding: 0px;
		color: white;
		padding-bottom: 3px;
		font-size: 1em;
		}
		
		/*------------------------------------------------------------------------ parametres de définition du cadre de contenu ------*/
				
		div#contenu
		{
		padding-top: 30px;
		background: url(bg_page.gif) no-repeat 15px 80px ;
		}/*parametre qui gere le cadre de contenu et integre un element graphique su rle coté de la page*/
		
				
		/*------------------------------------------------------------------------ parametres de définition de la partie rédactionnelle------*/
		
		div#redac
		{
		
		margin-left: 170px;
		margin-top: 0px;
		/*margin-bottom: 10%;*/
		padding: 25px 15px 0px 10px ;
		}/*parametres du cadre de droite contenant tout le rédactionnel*/
		
		div#contenu h2
		{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.3em ;
			color: orangered ;
			border-bottom: 1px solid orangered ;
		}/*parametres pour les titres*/
		
		div#contenu h3
		{
			margin-left: 15px ;
			padding-left: 5px ;
			/*border-bottom: 1px solid darkgray ;*/
			font-size: 1.1em ;
			color: darkgray ;
		}/*parametres pour les sous titres*/
				
		div#contenu p
		{
			text-align: justify ;
			text-indent: 1.5em ;
			line-height: 1.5em ;
		}/*parametres pour le texte*/
		
		div#contenu a
		{
			color: darkorange ;
			font-weight: bold ;
		}/*parametre du lien par défaut*/
		
		div#contenu a:hover
		{
			color: orange ;
			font-weight: bold ;
			text-decoration: none ;
		}/*parametre du lien survolé*/
		
		div#footer
		{
			margin-top: auto;
			padding-right: 10px ;
			text-align: right ;
			color: darkgray ;
			font-size: 0.9em ;
		}/*paremetres du bas de page*/


et voici mon index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
				<title>Sisteer beta 1.0</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />

		<link rel="stylesheet" type="text/css" href="./style.css" />
		
		<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

	</head>
	
	<body>
	
	<div id="conteneur">	
	
		<h1 id="header"></h1>

		<div id="menu">
			
			<?php include ("menu.html");?>
			
		</div>
					
		
				
			<?php include ("switch2.php");?>
					
		
		
		<div id="contenu">
		
				<div id="redac">
				
					<?php include ("switch.php");?>
				
				</div>
				
				<div id="footer">
				
					<?php include ("footer.html");?>
				
				</div>
		
		</div>
		
		

	</div>
	
	</body>
	
</html>
merci j'ai essayé mais ca ne fait rien du tout.

peut on jouer sur l'ecart entre entre le <div id=redac> et le <div id=footer>?

j'ai mis un margin-top: 15%; qui me fait un écarte entre ces deux parties mais bon ca touche pas le bas de page quand le texte est tres court
je pense avoir trouvé un moyen (peut etre pas tres propre) de régler le probleme sur firefox.

Comme mon cadre de texte fini en milieu de navigateur, je lui ai collé un <div> en position absolute, de la meme couleur que le fond de texte, et qui vient donc compléter le cadre de texte au cas ou celui ci ne finit pas en bas.

vous en pensez quoi.
Modérateur
bonjour,
pour que ça marche:

html, body, #conteneur {height:100%;}


html, occupera au minimun 100% de hauteur de l'ecran mais il s'etend avec le contenu, (donc, body et conteneur suivent en principe).. A verifier voir avec IE, si les 100%; sont recalculés pour #conteneur ou reste les 100% de la hauteur d'ecran ?!

A plus, j'espere que cela repond a ta question.

p.s.(pour un footer toujours en bas voici comment je fais : http://gcyrillus.free.fr/dkg/trucs_css/pied_en_bas.html[/url], en utilisant cette methode, html, 100% puis les autres valeurs en pourcentage prennent cette valeur en reference.)

<edit> le footer est affublé bien entendu d'un clear:both; même si il se trouve en dehors du conteneur,au cas ou un element flottant deborde inopinement du conteneur principal. Smiley cligne
(à toujours lire les topics en diagonnale on comprend de travers , diagonale/travers, ça parait logique Smiley smile
Modifié par gcyrillus (19 Oct 2005 - 15:55)
Mieux et plus simple : mets un "clear: both" dans ton footer (et supprime le "margin-top: auto" qui ne sert à rien...
cette solution marche pour moi mais des que le contenu de la page fait appraitre un ascenceur, tout ce qui apparait apres défilement a sa couleur de fond coupée sous firefox.
Ben mets ta couleur de fond principale en "body" ou "conteneur", puis les autres en arrière plan de tes différentes boites, sauf pour le contenu principal ! (Et supprime le "height: 100%" du body aussi...)
Modifié par Macpom (18 Oct 2005 - 15:55)
Sujet clos
Aller à