Min-width, max-width, min-height és max-height Internet Explorer alatt


Amikor azt szeretnénk, hogy egy adott elem akkor is tartson meg bizonyos magasságot és/vagy szélességet, ha épp nincs elég tartalom benne ami kitöltse illetve a későbbiekben szeretnénk, ha az ez az elem nőne (több tartalom esetében), akkor a min-height és min-width kell nekünk.
Amikor azt szeretnénk, hogy egy elem semmi esetre se nyúljon tovább egy bizonyos szélességnél és/vagy magasságnál, akkor pedig a max-height és max-width kell nekünk.

Sajnálatos probléma, hogy az IE nem kezeli a többi böngészőben működő min/max width/height tulajdonságokat. Bár itt megjegyzem, hogy a “min-width”, “max-width” és “min-height” tulajdonságok már támogatja az IE7.

min-height !important használatával

1
2
3
4
5
selector {
  min-height:300px;
  height:auto !important;
  height:300px;
  }

Az alábbi böngészőkkel működik: IE6, Mozilla/firefox/Gecko, Opera 7.x+, Safari1.2

IE hack – 1.

1
2
3
4
5
6
7
8
div {
  min-height: 300px; /* Firefox, Opera, IE7 ertelmezi */
  background: green;
  }
 
* html div {
  height: 300px; /* IE6 ertelmezi es automatikusan no a magassag, ha ennel tobb a tartalom*/
  }

IE hack – 2.

1
2
3
4
5
div {
  min-height: 300px; /* Firefox, Opera, IE7 ertelmezi */
 _height: 300px; /* IE6 ertelmezi es automatikusan no a magassag, ha ennel tobb a tartalom*/
  background: green;
  }

Felhasznált irodalom

css alapjai IV. (Weblabor) – http://weblabor.hu/cikkek/cssalapjai4
Min-Height Fast Hack – http://www.dustindiaz.com/min-height-fast-hack

Kapcsolódó bejegyzések:
  • Aki foglalkozik táblázatok nélküli lapszerkezetek építésével, az már biztos belefutott (ha nem, akkor bele fog) abba a problémába, hogy a szépen beállított doboz …

  • Honlapkészítés közben néha jól jön, ha az egyes böngészők különböző szabványértelmezése miatt egyes CSS részleteket, kódokat böngészőhöz kötve tudunk definiálni. …

  • Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a do …

  • A gradiensek (színátmenetek) a web 2.0 stílus divatos és jellemzõ eszközei. Remekül alkalmazhatóak a térhatás illúziójának megteremtésére, és ma már szinte minde …

  • Az opacity tulajdonságot a w3c a második css specifikációban vezette be, viszont csak a CSS3-ban lett tökéletes. Én Firefox1.0.2, Mozilla1.7.5 böngészõkön t …

A cikket beküldte: Harder (http://blog.harder.hu)

5 hozzászólás

  1. Zetor says:

    Hi! A “min-height” -nek hogy lehet értéket adni js-ből?
    A window.div_id.style.min-height et nem eszi meg.

  2. ssjbroly says:

    Nagyon szépen köszönöm ezt a min-height-t egy fél napot töltöttem ennek megvalósitásával más módon, és ezzel sikerült . köszönöm

  3. Fefy says:

    Zetor: ha jól emlékszem, akkor a min-Height paraméter js-ben csak minHeight néven szerepel (kötőjel nélkül), tehát a te példád így néz ki: window.div_id.style.minHeight

  4. robigyerek says:

    Találtam egy új megoldást a min-width helyettesítésére. Amely úgy tünik, hogy minden böngészöben müködhet. Ellenöriztem W3Schools táblázataiban (http://www.w3schools.com/css/css_reference.asp).

    A feladat a következö:
    – hozzunk létre egy div-et, amely tartalmaz 2 másik div-et, rá kell alakulnia a tartalmára úgyhogy float: left kell, hogy legyen.
    – Az egyik div a min-width állítására kell, öneki a width tulajdonsága fogja reprezentálni a min-width-et.
    – A másikban majd a tartalom helyezkedik el.

    A kód a következö:

    1
    2
    
     
    egy kis tartalom

    Tehát van ez a line-height amely minden browser-ben megtalálható és ezt 0-ára állítjuk. Ekkor a sor eltünik, de figyelembe lesz véve a szélessége, tehát nem tud összébb menni a külsö div.

    Ha tudjátok, akkor próbáljátok ki légyszives más browser-ekben.

    Jó programozást mindenkinek, üdv: robi

  5. czakrisz says:

    Kérlek, írjatok példát max-ra is (nem js-re gondolok, csak sima html / css)! Köszi!

Szólj hozzá
a Min-width, max-width, min-height és max-height Internet Explorer alatt c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>