18100 sujets

Questions générales et questions de débutants

DIV qui prend 100% en hauteur

Bonjour,

sur un site j'ai mis 2 divs :

La div principal qui contient le cadre principal du site (où je mets un bandeau en haut), la div centre qui contient le "contenu" du site.

Voici un screenshot du site :
http://www.nicoco.free.fr/exemple

Malheureusement, sous Firefox, quand les pages sont plus grandes que la hauteur de la fenetre, j'ai un asencenseur vertical qui apparait à droite) et qui me décale tout le site (car il est centré)

J'ai essayé de mettre des height:100%; dans le css, mais rien à faire.

Voici le .css


			/* définition du style du fond qui se situe hors du cadre, ainsi que de la police par défaut*/
			body
			{
				margin: 0;
				padding: 0;
				font: 80% verdana, arial, sans-serif;
				background: #C9E6ED url(../images/fond.jpg);
			} 
			h1
			{
				font: verdana, arial, sans-serif;
				font-size: large;
				text-align: center;
			}
				
			dl, dt, dd, ul, li
			{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			#menu
			{
				position:absolute;
				left: 50%; 
				width: 42em;
				margin-left: -21em; /* moitié de la largeur */
				top: 75px;
			}
			
			#menu dl
			{
				float: left;
				width: 10em;
				margin: 20px;
			}
			
			
			/*
			   fond des cases au repos
			*/
			#menu dt
			{

				text-align: center;
				font-weight: bold;
				background: #C9E6ED;
				border: 2px double;
				border-color: Blue;
			}
			
			#menu dd
			{
				border: 1px solid gray;
			}
			
			/*
			   fond des cases sous menu
			*/
			
			#menu li
			{
				text-align: center;
				background: #C9E6ED;
			}


			/*
			   Liens
			*/
			#menu li a, #menu dt a
			{
				color: #000;
				text-decoration: none;
				display: block;
				height: 100%;
			}
			
			/*
			 Liens sur passage
			*/
			#menu li a:hover, #menu dt a:hover
			{
				background: #407fe8;
			}

			/* cadre principal du site qui contient la partie haute et basse du site*/
			#principal
			{
				width: 790px;
				margin: auto;
				background-color: #A1DFDF; /*padding-top: 0px;*/
				color: Black;
				border: medium solid;
				border-color: #407fe8;
				font-size: large;
				text-align: center;
			}

			#principal p
			{
				font-size:small;
				text-align: center;
			}

			/* partie centrale du site qui contient les données de chaque page*/
			#centre
			{
				width: 790px;
				margin: 0;
				margin: auto;
				color: Black;
				padding-top: 10px;
				font-size: small;
				text-align: justify;
				background: #ffffff;
				background-color: #E2F7F7;
			}
Salut, Smiley smile

Je ne comprends pas bien ton problème ... Si le corps de la page est plus grand que la fenêtre du navigateur, il y a automatiquement une barre de scroll verticale qui s'affiche, c'est un comportement normal du navigateur. Car sinon, comment veux-tu que l'on voit le reste de la page ... Smiley murf

Tu pourrais nous mettre un lien vers ta page web en ligne plutôt qu'une capture d'écran, ça permettrait de voir le problème de visu Smiley cligne
euh ... tu veux dire sur la page contact lol

Mahleureusement, il n'y a rien à faire à ma connaissance ...

C'est un comportement normal du navigateur.

Sur ta page contact, le corps de la page est plus petit que la hauteur d'une fenêtre, le navigateur centre donc la page sur 100% de la largeur de la fenêtre.

Sur la page description, par exemple, le corps de la page est plus grand que la hauteur d'une fenêtre, une barre de scroll verticale apparaît. Ce qui est normal, car sinon, comme je te l'ai déjà dit, comment veux-tu voir le reste de la page lol Le navigateur centre donc la page sur 100% de la largeur de la fenêtre moins la largeur de de la barre de scroll.

D'où le petit effet yo-yo constaté.

le seul moyen pour ne pas voir cet effet, serait d'aligner la page sur la gauche. Mais bien sûr, ce n'est pas l'idéal. Ou à la limite t'arranger pour que toutes tes pages soient plus grandes que la hauteur d'une fenêtre de navigateur Smiley cligne
pour info, j'avais trouvé une "astuce".
Mettre le menu en height:100 % dans le fichier css

le site avait donc toujours une hauteur qui crée un ascenseur.

Malheureusement, sur Firefox, le menu est en avant plan (transparent) et empeche de cliquer sur les liens Smiley confus (sur IE ca marche).
Je viens de vérifier sur les navigateurs installés sur mon PC :
- sous IE 6 : tu as raison, pas d'effet yo-yo
- sous Firefox 1.5, Opera 8.5 et Netscape 8 : effet yo-yo

Moi, à ma connaissance, on ne peut rien faire mais peut-être que quelqu'un connait une astuce Smiley cligne
Sujet clos
Aller à