Problème hauteur une fois scroll verticale

maskangel · 1 Mars 2006

Bonjour,

J'essaie de mettre en css un site actuellement en tables.

J'avance gentillement toutefois, je rencontre un gros problème. Si mon contenu est long, ça actif le scroll et là, j'ai une partie de mes contenus qui vont jusqu'enbas (c'est le but), mais pas tous. Ce qui a pour but de me faire péter la page.

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"> </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"> </div>
  <div id="footer">footer</div>
	</div>
	<div id="degradedroite"> </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
	}

J'ai volontairement forcé la hauteur du contenu pour activer le scroll.

Comment puis faire pour que la div global tire jusqu'en bas de la page? Ainsi, mes futurs dégradés (div à gauche et à droite) suivront également.

D'avance merci beaucoup et meilleures salutations.

David

jeanpierre949 · 1 Mars 2006

salut.

tu n'as pas un lien pour qu'on se rende compte du probleme parceque "fait peter la page" c'est assez vague

maskangel · 3 Mars 2006

Oubliez mon problème, j'ai trouvé des parades !

Merci et salutations.

**captain_torche** · 3 Mars 2006

Tant qu'à faire, tu peux expliquer tes parades, ça permettra à quelqu'un dans le même cas que toi, de trouver la réponse plus vite.

maskangel · 3 Mars 2006

Effectivement.

Toutefois, la solution a été de tout reprendre à zéro donc pas mal de chose en changé.

Toutefois, mon gros problème était lié au fait que je voulais que mes dégradés soient toujours du haut au bas de la page quoiqu'il arrive et la même chose pour un fond de colonne de couleur.

La solution a été de créer une image de background de 1px de haut et de toute la largeur de mon contenu (800px). Dans cette image, il y a la présence des dégradés (les dégradés sont horizontaux) ainsi que du fond bleu. Ainsi, je n'ai plus besoin d'avoir de contenu qui tire le tout. Mon contenu prend la place qu'il veut, le background fait le reste.

C'était tellement simple que je n'y avait pas pensé :fou:

A cela, j'ai laissé le js qui met toujours le footer en bas de page et ça donne quelque chose de très propre. Toutefois, je ne peux rien montrer car il s'agit d'un rebranding d'une boîte qui ne sortira qu'en avril...

maskangel · 3 Mars 2006

Au fait, comment est-ce que je peux rajouter le tag [Résolu] dans le titre de mon message ???

**captain_torche** · 3 Mars 2006

Pour le footer en bas de page, ça peut être arrangé en CSS :

  #footer {
 	 position: absolute;
 	 bottom: 0px;
}

Modifié 3 Mars 2006 par captain_torche

Connexion

Problème hauteur une fois scroll verticale

Sujets conseillés

maskangel

jeanpierre949

maskangel

captain_torche

maskangel

maskangel

captain_torche

Veuillez vous connecter pour commenter

Parcourir

Activité