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

5 HOZZÁSZÓLÁS

  1. 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. 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. 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. 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. Kérlek, írjatok példát max-ra is (nem js-re gondolok, csak sima html / css)! Köszi!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét