Dinamikus DIV magasság, statikus pozíció
Sziasztok!
Szeretnék egy DIV-et úgy elhelyezni egy weboldalon, hogy felül 400px, alul 80px, baloldalon 10px "margó" (nevezzük bárminek) maradjon, a szélessége pedig 240px. Ezt a következő megoldással alkottam meg:
DIV {
position: absolute;
top: 400px;
left: 10px;
bottom: 80px;
width: 240px;
overflow: auto; }
Ez szépen működik is az újabb böngészőkben (Opera 9.5x, FireFox 2+, IE7), de nem működik IE6 alatt, a bottom property-t nem veszi figyelembe. Rendben, mondom én, és megpróbálkoztam ezzel:
DIV {
position: absolute;
top: 0px;
left: 10px;
width: 240px;
height: 100%;
margin: 400px 0px 80px 10px;
overflow: auto; }
ami szintén működött mindenhol, de nem az IE6-osban, ráadásul most két okból nem: 1) a 100%-os height neki az "aktív" tartalom, azaz margók nélkül, tehát 400px top marginnál kezdődik csak a száz százalék, "lefelé" tehát kilóg 400px-nyit a DIV. 2) a margin-bottom értéket figyelmen kívül hagyja... padding-gal sem működik. körítésnek hozzáteszem, hogy a html és body elemek 100%-os width és height property-vel rendelkeznek (szép magyar mondat volt :p).
Tud bárki bármilyen megoldást a problémára? Már azzal is simán kiegyeznék, ha nem lenne univerzális a kód, tehát külön lenne egy az IE6-ra, de egyszerűen semmivel nem tudom rávenni, hogy így használja ki a fennmaradó helyet a DIV. Köszönöm előre is a segítséget!
re: Dinamikus DIV magasság, statikus pozíció
Nagyon érdekes kérdés, tudom, hogy nagyon gáz, de itt van egy nem túl jó megoldás ie-re (ez csak ie-re jó, de arra tudsz kivételt tenni ugye if-es beágyazással), ha eszembe jut valami korrektebb írok. :wink:
body {
margin-bottom: 480px;
}
div.box {
position: fixed;
width: 240px;
margin: 400px 0 80px 10px;
height: 100%;
overflow: auto;
}
re: Dinamikus DIV magasság, statikus pozíció
Idézet:
Simulacrum eredeti hozzászólása
Nagyon érdekes kérdés, tudom, hogy nagyon gáz, de itt van egy nem túl jó megoldás ie-re (ez csak ie-re jó, de arra tudsz kivételt tenni ugye if-es beágyazással), ha eszembe jut valami korrektebb írok. :wink:
body {
margin-bottom: 480px;
}
div.box {
position: fixed;
width: 240px;
margin: 400px 0 80px 10px;
height: 100%;
overflow: auto;
}
Köszönöm, ez tényleg működik. Azért, ha van jobb ötlet, szívesen fogadom, mert a BODY { border-bottom: 400px;} miatt szerintem más elemekkel lesz gondom, azt most már nem teszteltem. Majd holnap. Amúgy két napja bújom a netet, nem gondoltam volna, hogy ennyire speckó az igényem... Tény, hogy nem nagyon találtam példát ilyen felépítésre a neten, talán nem véletlen? :) Holnap megnézem, hogy a többi tartalom hogyan viselkedik ilyen BODY-val... Köszi még1szer, el sem hiszem, hogy valami működik :)
re: Dinamikus DIV magasság, statikus pozíció
a div részedet kombinálnám ezzel Kód:
<div style="border: 1px solid red; margin-top: 400px; margin-left: 10px; width: 240px; height: 100%;"> valami </div>
ehhez már csak pozicionálnod kell. de ha jol vettem ki akkor ez a problémád. a body modositása hiba, minden elemet el fog tolni soksoksok pixellel.
Több alternativ megoldás is van. Lehet "láthatatlan" divekkel táblarendszert összerakni, és azok eltologatják a többit (láttunk már ilyet).
Lehet "egyszerűbb" css megoldásokkal.
Lehetne esetleg egy dw-vel megnézni egy layeres megoládst, hogy mit homorit rá.
Persze lehet h lehurrognak a többiek, de késő van, most nem tudok gondolkodni ugysem :)