Hauteur 100% depasse et scroll

Bonjour

J'ai un problème je cherche a le résoudre mais la je vois pas.

J'ai une page en div et je souhaite qu'elle fasse en hauteur au minimum la hauteur de la page le problème avec ce que j'ai fait c'est que ca fais plus que le minimum ca rajoute un scroll.

Je pense qu'il rajoute la hauteur du header mais je vois pas pouquoi.

Voila la structure utilisé:

<div id="header"></div>
<div id="main">
    <div id="main_gauche"></div>
    <div id="main_texte"></div>
</div>
<div id="footer"></div>

et ce que j'ai mis dans le css :

body {
	margin: 0;
	height: 100%;
}
html {
	height: 100%;
}

#header {
	margin: auto;
	height: 218px;
	width: 100%;
	min-width: 1008px;
}
#main {
	margin-top: -30px;
	width: 1008px;
	height: 100%;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#main_gauche {
	width: 127px;
	background-image: url(../images/fondmenu.jpg);
	background-repeat: repeat-y;
	height: 100%;

}
#main_texte {
	width: 881px;
	display: block;
	float: left;

}
#footer {
	height:50px;
	min-width: 1008px;
	background-image: url(../images/footer.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: -32px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}

Voila si vous pouvez m'aider.

Merci

@++
Modifié par Neoh56 (15 Jan 2011 - 02:34)

Bonjour Neoh

En plusieurs étapes.

Il me semble que soit l’extrait de source CSS que tu présente est trop simplifié, ou alors c’est la source elle-même qui a encore un peu plus de problèmes que le seul décrit ici.

Voici à quoi correspond cet extrait : Test 1

Le #main_texte s’en va se promener là où je suppose que tu ne voulais pas vraiment qu’il aille.

Seconde version corrigée, mais qui ne répond pas à ta question (voir plus loin) : Test 2

Son CSS :

html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%; /* Height will equal that of the viewport. */
}
#header {
    /*margin: auto;*/
    height: 218px;
    /*width: 100%;*/
    min-width: 1008px;
}
#main {
    margin-top: -30px;
    width: 1008px;
    height: 100%;
    margin-right: auto;
    /*margin-bottom: auto;*/
    margin-left: auto;
}
#main_gauche {
    width: 127px;
    background-image: url(../images/fondmenu.jpg);
    background-repeat: repeat-y;
    height: 100%;
    float: left; /* Added. */
}
#main_texte {
    width: 881px; /* #main.width - #main_gauche.width */
    display: block;
    float: right; /* Changed. */
    margin-left: -127px; /* Added: negative of #main_gauche.width*/
}
#footer {
    height:50px;
    min-width: 1008px;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: -32px;
    /*margin-right: auto;*/
    /*margin-bottom: auto;*/
    /*margin-left: auto;*/
}

J’ai essayé de deviner ce que tu as voulu faire, et ai donc changé le float:left de #main_texte en float:right, et j’y ai également ajouter un left-margin:-127px, comme expliqué en commentaire. J’ai également désactivé les propriété inutiles (elles ne changent rien).

Concernant la hauteur de ta page, oui, elle déborde, et à défaut de te donner une solution, comprendre ce qui se passe pourra éventuellement t’aider. Tu donne à tes HTML et BODY, une hauteur de 100%. Ça c’est bon, ça donne au BODY la hauteur de la zone d’affiche de la fenêtre. Mais ensuite, tu donne à #main, une hauteur de 100%. Ces 100% se rapporte à la hauteur de son conteneur, ce conteneur est BODY, et donc ton #main prend la hauteur de la page. Comme ton #main est décalé vers le bas de 188 pixels (218 - 30) par rapport au bord-haut de la page, le contenu totale dépasse la hauteur de la zone d’affichage. c’est logique, puisque tu décale vers le bas quelque chose qui a la même hauteur… le résultat est nécessairement plus grand. Ensuite, tu ajoute même encore à cette hauteur 18 pixels (50 - 32). Le contenu de ta page fait donc : hauteur de la zone d’affichage + 188 + 18 pixels.

Concernant une réponse à ta question : je vois bien ce que tu veux faire, mais je ne connais pas de solution y menant en suivant cette voie. Il faudrait que tu ajuste la hauteur de #main, mais il n’est pas possible en CSS, de dire “height: 100% - 106px;”

Alors soit 1) tu garde cette voie, et alors tu n’arrivera pas au visuel que tu souhaitais 2) tu veux absolument ce visuel, et alors il faut revoir tout depuis le début.

Souhaite-tu tirer partie de ce que tu as déjà quit à ce que ça ne ressemble pas tout à fait à ce que tu souhaitais au départ, ou souhaite tu tenter d’imaginer une autre voie pour y parvenir ?

Bon, en tous cas personnellement je ne vois pas de moyen d’y arriver à partir de cette architecture.
Modifié par hibou57 (15 Jan 2011 - 05:09)

Bonsoir

Je te remercie de ta réponse j'ai bien regarder de que tu as indiqué et j'ai decidé de revoir toute la structure.

Et maintenant c'est nickel.

merci d'avoir pris le temps de faire une reponse si bien détaillée.

@++