Egy "ELEM" megjelenési magasságának TESZT-je kezdők részére

(BOX-MODEL: megjelenítési magasság = top-margin + top-border + top-padding + "HEIGHT" (content) + bottom-padding + bottom-border + bottom-margin)

 
Fejléc
Tartalom kezdete
CONTENT DIV:
style=" width:100%; height:300px; margin:0; padding:5px 0; background-color:yellow; overflow:auto;"
A "FOOTER" plusz "CONTENT DIV" az ablakon belül marad magasságban, mivel magassága kisebb mint "ablakH-20px".




























Tartalom vége
 
Fejléc
Tartalom kezdete
CONTENT DIV:
style=" width:100%; height:370px; margin:0; padding:5px 0; background-color:yellow; overflow:auto;"
A "FOOTER" plusz "CONTENT DIV" pont kitölti az ablakot, mivel magassága egyenlő mint "ablakH-20px".




























Tartalom vége
 
Fejléc
Tartalom kezdete
CONTENT DIV:
style=" width:100%; height:100%; margin:0; padding:5px 0; background-color:yellow; overflow:auto;"
A "FOOTER" plusz "CONTENT DIV" magasabb lesz, mint az ablak(a fejléc magasságával).




























Tartalom vége
 
Fejléc
Tartalom kezdete
CONTENT DIV:
style=" width:100%; height:auto; margin:0; padding:5px 0; background-color:yellow; overflow:auto;"
A "FOOTER" plusz "CONTENT DIV" magasabb lesz, mint az ablak(a fejléc-magasság + tartalom-magasság összegével).


























Tartalom vége
 


A ZÖLD az 400px magas "ETALON".
A KÉK az 400px magas "TESZT-ABLAK", 10px bal/jobb paddinggal a láthatóság miatt.
A SZÜRKE az 20px magas "FOOTER".
A SÁRGA a "CONTENT",alsó/felső 5px paddinggal, 400px-nél magasabb tartalommal és különböző magasság-magadási módokkal(300px, 370px, 100%, auto).
Ez a kép megváltozik ha megváltoztatod a "TESZT-ABLAK" magasságát:        
!!!ELENŐRIZD TÖBBFÉLE BÖNGÉSZŐNÉL!!!   Az eredeti IFRAME-kérdés megoldása
Vissza a PROG.HU Tesztek-re.

Egy másik kérdéshez kapcsolódva a "háttérkép" mindig felveszi az aktuális ablak-méretet.