28173 sujets

CSS et mise en forme, CSS3

Problème de hauteur une fois qu'il y a scroll vertical

Bonjour,

Je débute et je câle..... je suis en train de me prendre la tête sur un problème.

Mon but est que le footer se trouve toujours en bas d'écran et du contenu, pour cela, je me suis inspirer de l'article sur le site en reprenant le js.

J'ai un header, un contenu, une colonne à droite et de chaque côté de tout ça, 1 colonne avec ce qui sera un dégradé.

Entre le contenu et le footer, je retrouve sans arrêt la hauteur de mon header.

Ca serait sympa si quelqu'un pouvait m'aider.

Voici mes css:
html, body {
	background-color: #fff;
	color: #666666;
	margin: 0;
	padding: 0;
	height: 100%;
	text-align: center; /* pour corriger le bug de centrage IE du style global*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px
	}

#global {
     position: relative; /* on positionne le conteneur si éléments positionnés en absolus ou relatifs à l'intérieur*/
     margin: 0 auto;
     width: 800px;
     text-align: left; /* on rétablit l'alignement normal du texte pout le bug IE*/
	 height: 100%; 
     }

#page {
	width: 770px;
	height: 100%;
	position: relative;
	float: left;
	background-color: #009933
	}

#degradegauche {
	background-color:#FF0099;
	height: 100%;
	width: 15px;
	position: relative;
	float: left;
	margin: 0
	}

#degradedroite {
	background-color:#FF0099;
	height: 100%;
	width: 15px;
	position: relative;
	float: left;
	margin: 0
	}
	
#header {
	background-color:#999999;
	width: 100%;
	height: 80px;
	position: relative;
	float: left
	}
	
#conteneur {
  width: 100%;
  float: left;
  margin-right: -160px;
}	

#contenu {
	margin-right: 160px
	}

#navigation {
	background-color:#FFCC00;
	position: relative;
	float: left
	}
	
.colonne-bleue {
	background-color:#00CCFF;
	width: 160px;
	float: right
	}

.deblayage {
  height: 0;
  clear: both;
}

#footer {
	width: 770px;
	background-color:#993399;
	vertical-align: bottom
	}


Et voici mon html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="bcv.css" rel="stylesheet" type="text/css">
<script language="javascript" src="hauteur_nav.js"></script>
</head>

<body>
<div id="global">
	<div id="degradegauche">&nbsp;</div>
	<div id="page">
		<div id="header">header</div>
		<div id="conteneur">
			<div id="contenu">contenu</div>
		</div>
		<div class="colonne-bleue" style="height: 100%">colonne-bleue</div>
		<div class="deblayage">&nbsp;</div>
		<div id="footer">footer</div>
	</div>
	<div id="degradedroite">&nbsp;</div>
</div>
</body>
</html>


Intéressant ce css mais alors, quand on débute, on se dit "putain, c'est quand même plus simple avec des tableaux Smiley langue

Merci d'avance pour tout et meilleures salutations.

David
Modifié par maskangel (01 Mar 2006 - 09:22)
En complèment:

Mon problème est vraiment lié à la hauteur de la "colonne-bleue". En effet, en % je ne vois pas comment je peux lui dire d'aller à chaque fois jusqu'en bas de la page étant donné que j'ai un header qui prend une place fixe. J'ai également essayé avec une marge négative mais ça ne donne rien...

J'attends donc votre aide, merci.
Malheureusement, on dirait bien que personne ne peut m'aider.

Toutefois, j'avance gentillement de mon côté. Peut-être que maintenant ça risque d'être plus clair pour certain d'entre vous.

Voici mon code html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="bcv4.css" rel="stylesheet" type="text/css">
<script language="javascript" src="hauteur_nav.js"></script>
</head>

<body>
<div id="global">
	<div id="degradegauche">&nbsp;</div>
	<div id="page">
		<div id="header">header</div>
		<div id="conteneur">
			<div id="contenu">
			</div>
		</div>
		<div id="colonne-bleue">colonne-bleue</div>
		<div class="deblayage">&nbsp;</div>
		<div id="footer">footer</div>
	</div>
	<div id="degradedroite">&nbsp;</div>
</div>
</body>
</html>


Et voici mes css:
html, body {
	background-color: #fff;
	color: #666666;
	margin: 0;
	padding: 0;
	height: 100%;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px
	}

#global {
	background-color:#000000;
     position: relative;
     margin: 0 auto;
     width: 800px;
     text-align: left;
	 height: 100%;
     }

#page {
	width: 770px;
	height: 100%;
	position: relative;
	float: left;
	background-color: #009933;
	}

#degradegauche {
	background-color:#FF0099;
	height: 100%;
	width: 15px;
	position: relative;
	float: left;
	margin: 0
	}

#degradedroite {
	background-color:#FF0099;
	height: 100%;
	width: 15px;
	position: relative;
	float: left;
	margin: 0
	}
	
#header {
	background-color:#999999;
	width: 100%;
	height: 80px;
	position: relative;
	float: left
	}
	
#conteneur {
	background-color:#999966;
  	width: 100%;
  	float: left;
  	margin-right: -160px;
	margin-top: 0;
	}

#contenu {
	background-color:#993333;
	margin-right: 160px;
	margin-top: 0;
	height: 1000px
	}
	
#colonne-bleue {
	background-color:#00CCFF;
	height: 100%;
	margin-top: -130px;
	width: 160px;
	float: right
	}

.deblayage {
  height: 0px;
  clear: both;
}

#footer {
	width: 770px;
	height: 50px;
	background-color:#993399;
	vertical-align: bottom
	}


Maintenant, tout tient bien en place tant que le contenu n'est pas trop long et que la page reste affichée entièrement à l'écran. A partir du moment où il y a un scroll, la "div id=global" ne s'étant pas en longueur malgré ses 100% et donc, une partie du contenu continue et le reste pas.

p.s. j'ai mis volontairement une hauteur de 1000px au contenu pour avoir le scroll.
Sujet clos
Aller à