Discussion :

[jadorelescss38]

Bonjour,
j'ai un petit soucis d'affichage entre Mozilla Firefox et Internet Explorer.

Voici ce que je souhaite faire:
j'ai un cadre dans ma page (balise <div>) auquel je veux appliquer les critères suivants:

- je veux qu'il ai une taille minimum (à la fois pour sa hauteur et sa longueur).
- je veux que lorsque son contenu est plus important que la taille minimum, le cadre s'adapte à la taille du contenu (aussi bien sa hauteur que sa largeur et cela sans scrollbar).

Sous IE tout va bien, c'est sous Mozilla que j'ai des soucis...

Problème n°1:
Pour pouvoir réaliser une hauteur minimum, je pensais utilisé "min-height" avec une valeur en pourcentage... mais visiblement, le pourcentage n'est pas reconnu par Mozilla. En revanche, "min-height" avec une valeur en px est parfaitement reconnu... Le problème, c'est que lorsque je change la taille d'affichage de mon navigateur Mozilla (en créant un nouvel onglet par exemple ou en affichant une barre d'outils supplémentaire comme Web Developper Toolbar), mon cadre garde sa taille et devient donc disproportionné par rapport aux autres éléments de la page.
Il faut donc que je puisse définir une hauteur minimum avec un pourcentage, mais je vois pas comment...

Problème n°2:
Lorsque le contenu est important, je veux que la taille du conteneur s'adapte... C'est le cas pour en "height" mais pas en "width"....

Voici le code CSS que j'applique à ma balise <div>:

div.create_form_page {
font-size: 9px;
margin: 0px;
margin-right: 4px;
margin-left: 4px; /* marge entre le treeview et le cadre */
margin-bottom: 4px;
padding-top: 5px;
padding-left: 5px;
/*background: #FFFFFF;*/
background: #fff url("../images/fond_default.jpg");
/*background-attachment: fixed;*/
border: 1px #8CACBB solid;
line-height: 16px;
min-height: 365px; /* fonctionne pour Mozilla (ne marche pas avec des pourcentages) */ /*300px*/
height: 88%; /* fonctionne pour IE */ /* valeur de base 92%*/
}

Ne faites pas attention aux commentaires, ils n'ont aucun intérêt...

[Candygirl]

Hello,

Pour que le min-height ou un height en % soit pris en compte, il faut impérativement que le parent ait un height de renseigné. Si ce n'est pas le cas, le height (ou min-height) prend la valeur auto.

Si tu veux quelque chose de relatif à la taille de la fenêtre, tu devrais commencer par attribuer un height de 100% au html et body:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
html, body {height:100%}
#mondiv {min-height:82%}

Dans cet exemple, il faut que "mondiv" soit descendant direct du body.

[jadorelescss38]

Merci pour ta réponse.
Je savais pas tout sa, je vais vérifier mon code.