{"id":209,"date":"2009-03-18T08:40:00","date_gmt":"2009-03-18T08:40:00","guid":{"rendered":"http:\/\/www.blackspotradish.com\/wp\/?p=209"},"modified":"2009-03-18T08:40:00","modified_gmt":"2009-03-18T08:40:00","slug":"astuce-css-et-min-height","status":"publish","type":"post","link":"https:\/\/www.blackspotradish.com\/wp\/2009\/03\/astuce-css-et-min-height\/","title":{"rendered":"Astuce CSS et min-height"},"content":{"rendered":"<p>Un attribut CSS dont je me sers tout le temps quand je fais des sites&#8230; le <strong>min-height <\/strong>(comme <a href=\"http:\/\/www.coucoucircus.org\/intervenants\/images\/minet.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">Bernard<\/a>). Propri\u00e9t\u00e9 \u00f4 combien magique qui permet de d\u00e9finir une hauteur minimale pour un bloc. Cependant, suivant les navigateurs, \u00e7a marche ou pas. Donc voici l&#8217;astuce machiav\u00e9lique qui fait que \u00e7a fonctionne avec tous les navigateurs (enfin bon, en tout cas sous Internet Explorer 6 et 7, Google Chrome, Firefox 2 et 3, le machiav\u00e9lisme est fain\u00e9ant des fois) :<\/p>\n<p> <code>votre_selecteur {<br \/>  min-height:400px;<br \/>  height:auto !important;<br \/>  height:400px;<br \/>}<\/code><\/p>\n<p><strong>Explications :<\/strong> dans les faits (comme <a href=\"http:\/\/httpcarolecenterblognet.h.t.pic.centerblog.net\/81gfeuqe.gif\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">Clochette<\/a>), <ins>min-height<\/ins> est compris par Chrome, FF et IE7, mais pas IE6. <br \/>Cependant sous IE6, <ins>height<\/ins> poss\u00e8de la m\u00eame propri\u00e9t\u00e9 que le <ins>min-height<\/ins>. Donc, on ajoute la r\u00e8gle <ins>!important<\/ins> qui va faire que :<\/p>\n<ul>\n<li>Pour FF, IE7 et Chrome <ins>height: auto<\/ins> va \u00eatre pr\u00e9f\u00e9r\u00e9 \u00e0 <ins>height: 400px;<\/ins> propri\u00e9t\u00e9 m\u00eame du <ins>!important<\/ins> qui va faire interpr\u00e9ter au navigateur l&#8217;attribut poss\u00e9dant la r\u00e8gle <ins>!important<\/ins> dans un s\u00e9lecteur si un attribut est d\u00e9fini plusieurs fois. La hauteur ne va donc pas \u00eatre fixe, avec une hauteur minimale. Youpi, c&#8217;est ce qu&#8217;on voulait.<\/li>\n<li>Pour IE6 (et peut-\u00eatre inf\u00e9rieur qui sait&#8230;), cette ligne de CSS va tout bonnement \u00eatre ignor\u00e9e : IE6 ne la comprend pas. IE6 va donc juste interpr\u00e9ter : <ins>height 400px;<\/ins> qui, dans le codage douteux d&#8217;IE6 je le redis, poss\u00e8de la m\u00eame propri\u00e9t\u00e9 que <ins>min-height<\/ins> sous les derniers navigateurs.<\/li>\n<\/ul>\n<p> Petit rappel qui ne fait pas de mal, on ne sait jamais : l&#8217;ordre de ces lignes est capital. Bah oui, le CSS c&#8217;est pas encore du langage logique, bien que le bord\u00e9lisme de certaines feuilles de style rappelle la douce insouciance des sessions de Prolog&#8230;<\/p>\n<p>C&#8217;est loin d&#8217;\u00eatre tout neuf comme astuce, mais si je cherche le petit bout de code qui va bien, maintenant, je sais o\u00f9 il est.<\/p>\n<p>PS : au fait, et tant qu&#8217;\u00e0 faire, \u00e7a marche aussi pour max-height, min-width et max-width. C&#8217;est pas merveilleux ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un attribut CSS dont je me sers tout le temps quand je fais des sites&#8230; le min-height (comme Bernard). Propri\u00e9t\u00e9 \u00f4 combien magique qui permet de d\u00e9finir une hauteur minimale pour un bloc. Cependant, suivant les navigateurs, \u00e7a marche ou pas. Donc voici l&#8217;astuce machiav\u00e9lique qui fait que \u00e7a fonctionne avec tous les navigateurs (enfin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[102,23,24],"class_list":{"0":"post-209","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css","7":"tag-css","8":"tag-height","9":"tag-min-height","10":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":0,"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blackspotradish.com\/wp\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}