Marche pas le min-height?

[Sebastien]

J'ai retouché la feuille de style de mon annuaire numérique pour qu'il s'affiche bien dans Firefox.

Mon conteneur (main) a un min-height de 100% or dans Firefox la hauteur du conteneur ne prends pas les 100% et laisse apparaitre du gris en bas ce qui est moche... Comment je fait pour faire descendre mon conteneur jusque en bas?

[Dash]

pourquoi pas

height: 100%;

?

il me semble que ca serait plus approprie que "min-height"

[Sebastien]

Si j'utilise height ca marche pas quand le contenu dépasse une page, le fond blanc s'arrete alors au milieu de la page

[Raphael]

Salut,

Tu confirmes que ton problème apparait sur Firefox, pas sur IE ?

Le document est bien dimensionné ? (pour que les % puissent avoir une référence)

Modifié 2 Décembre 2004 par Sibelius

[Sebastien]

J'utilise un script qui a 2 feuilles de style dynamiques, une pour IE, une pour les autres navigateurs. Mon probleme n'apparait que sur Firefox

Voici le php/feuille de style :

<?
include ("style.php");
?>
BODY {font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; color: <? echo $text_color?>; background: <? echo $side_background_color?>; margin: 0px}
A:link {color: <? echo $link_color?>}
A:visited {color: <? echo $link_color?>}
A:hover {color: <? echo $link_mouseover_color?>}
FORM {margin: 0px}
H1 {width:100%; font-size: <? echo $highlight_text_size?>px; font-weight: bold; margin: 0px}
P {margin:0px; margin-top:10px}

.main {position: relative; margin-left: auto; margin-right: auto; min-height: 100%; width: 728px; font-size: <? echo $text_size?>px; background: <? echo $main_background_color?>; padding: 25px 15px 20px; border: 2px <? echo $main_border_color?>; border-style: none solid;}

.logo a {width: 728px; height: <? echo $logo_height?>px; background-image: url("<? echo $logo_url?>"); background-repeat: no-repeat; background-position: top right; display: block}

.heading {width: 728px; padding: 10px 0px 15px; border-bottom: 1px solid <? echo $highlight_border_color?>}
.heading_path {font-size: <? echo $text_size?>px; padding-top: 5px}

.search {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}
.search_controls {}
.search_controls_text {width: 249px; height: 20px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; padding: 2px 4px}
.search_controls_button {width: 140px; height: 21px; font-size: <? echo $text_size?>px; font-family: <? echo $text_face?>; background: <? echo $button_background?>}
.search_add {text-align: right}
.search_add a {padding-left: 3px}

.text {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}
.text_path {font-size: <? echo $highlight_text_size?>px; font-weight: bold}
.text_text {}
.text_block {padding-top: 10px}

.form {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}
.form_text {}
.form_controls {padding-top: 10px}
.form_controls_text {width: 300px; height: 20px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; padding: 2px 4px}
.form_controls_radio {position: relative; top: 2px; left: -4px}
.form_controls_button {width: 200px; height: 21px; font-family: <? echo $text_face?>; font-size: <? echo $text_size?>px; background: <? echo $button_background?>}

.categories {width: 728px; background: <? echo $highlight_background?>; padding: 15px 0px; border: 1px solid <? echo $highlight_border_color?>; border-top: 0px; overflow: hidden}
.categories_text {padding: 0px 20px}
.categories_block {padding: 10px 20px 0px}
.categories_blocks {padding: 10px 20px 0px}
.categories_blocks_left {}
.categories_blocks_right {}
.categories_category {font-size: <? echo $highlight_text_size?>px; display: block}
.categories_category_title {font-size: <? echo $highlight_text_size?>px; font-weight: bold; color: <? echo $text_color?>; display: inline}

.pages {width: 728px; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>; overflow: hidden}
.pages_results {}
.pages_page {margin-top: 10px}
.pages_page_title {font-size: <? echo $highlight_text_size?>px; font-weight: bold; display: inline}
.pages_page_category {display: inline}
.pages_page_description {display: block}
.pages_page_url {display: block;}

.options {width: 728px; text-align: right; padding: 15px 0px; border-bottom: 1px solid <? echo $highlight_border_color?>}

.links {width: 728px; padding: 15px 0px 0px}

.alert, .alert:link, .alert:visited {color: red; display: inline}

[Raphael]

Houlà, j'ai un peu de mal avec PHP moi.

Je te propose un truc qui est peut-être complètement à côté de la plaque, mais essaye de dimensionner le document :

html, body {

height: 100%;

}

[Sebastien]

J'ai mis le body à height:100%; et oh miracle ca marche merci sibelius (le roi du css)

[Raphael]

OK, c'est donc un problème de pourcentage et pas de "min-height"

Tu as un billet à ce sujet si tu veux plus d'explications :

http://www.alsacreations.com/blog/index.ph.../05/13/3-height