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.
Tartalomjegyzék
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
Hi! A „min-height” -nek hogy lehet értéket adni js-ből?
A window.div_id.style.min-height et nem eszi meg.
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
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
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ö:
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
Kérlek, írjatok példát max-ra is (nem js-re gondolok, csak sima html / css)! Köszi!