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)
Tweet This
Share on Facebook
Digg This
Save to delicious
Stumble it
RSS Feed
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!