Aller au contenu

Problème hauteur une fois scroll verticale

maskangel

Par maskangel
dans (X)HTML et CSS

 Partager

Sujets conseillés

maskangel

maskangel

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
maskangel

maskangel

Posté
  • Auteur
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...