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
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.
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.
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/cssalapjai4Min-Height Fast Hack - http://www.dustindiaz.com/min-height-fast-hack
Harder
Profil
Korábbi hozzászólások (5)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
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ö:
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
Kérlek, írjatok példát max-ra is (nem js-re gondolok, csak sima html / css)! Köszi!
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat