CSS, DIV varázslót keresek

Internet: PHP, CGI, stb.

Egy ideje próbálkozok összehozni egy layout-ot CSS-ben, eddig kevés sikerrel.
Ha el is jutok egy pontig akkor szinte biztos, hogy az következő dolog amit csinálok még az addig jó dolgot is elrontja.
Ebben kérnék egy kis segítséget. Elvileg egy egyszerű elrendezést szeretnék megvalósítani vele. Talán e-mail weblapokra hasonlít a legjobban a dolog ami kellene.
Valahogy így kellene kinéznie a véglegesnek:

Ahol a:
- kék vizszintesen 100%, függőlegesen 30px
- lila vizszintesen 100px, függőlegesen kitölti a helyet
- zöld vizszintesen 100px, függőlegesen kitölti a helyet, függőleges scrollbar
- cyan vizszintesen kitölti a helyet, függőlegesen kitölti a helyet, függőleges scrollbar
- piros vizszintesen kitölti a helyet, függőlegesen 300px, függőleges scrollbar
- minimális margó a területek között pl. 5px

Eddig ezt sikerült összehoznom, ami talán közel áll ahhoz amit szeretnék:
http://jsfiddle.net/QXKtm/69/

  • 4289 megtekintés

( kerozoli v | 2014. 10. 28., k – 20:05 )

Ilyen layout mintából/generálóból dugig van a net...

Esetleg ezt átfuthatod: http://alistapart.com/article/multicolumnlayouts

Ha rákeresel a "The next example illustrates" szövegre, és megnézed azt a példát, nagyjából az a layout, amit keresel (ill. a cikk linkel több multi column megoldást)

BlackY
--
"en is amikor bejovok dolgozni, nem egy pc-t [..] kapcsolok be, hanem a mainframe-et..." (sj)

Ha a piros és a cyan helyett egy van akkor nincs gondom. Azt még összeraktam mindenféle generátor nélkül. Viszont ha azt meg akarom osztani két részre akkor szétesik az egész.
Akkor tudtam csak elosztani két részre ha meghatároztam mindkettőnek a függőleges méretét %-ban vagy px-ben.

( onyx v | 2014. 10. 28., k – 21:38 )

Tisztan css-sel nem tudtam megcsinalni, de kis javascript segitseggel igen.

http://jsfiddle.net/QXKtm/77/

Nem tudom igy is jo-e. Ha igen, akkor kell meg el kell javascriptbol kapni a window resize eventet es arra is meg kell hivni a fuggvenyt ahol updateled ezeket a mereteket.

( BaT | 2014. 10. 28., k – 21:40 )

Mit értesz az alatt, hogy "függőlegesen kitölti a helyet"? Az egyszerre a képernyőn megjelenő helyet töltse ki?

( joco01 v | 2014. 10. 28., k – 21:41 )

Szerintem eleve rosszul indulsz neki, nem elég pontos a definíció. Mit jelent az, hogy "kitölti a helyet"? Minek az x%-át kell kitölteni? Van egy mérete a böngésző ablaknak, ami változhat, ha user átméretez. Van egy mérete egy csomó DOM elemnek, ami tud a tartalomhoz igazodni bizonyos korlátok között. És még ezen felül egy DOM elem mérete és a tartalmának mérete nem szükségszerűen egyforma, ez az az eset, amikor scrollozódik a tartalma. És még akár azt is figyelembe lehet venni, ha user zoomol ki-be.

--

Egyszeru ravagni, hogy rosszul indul neki. Teny, hogy nincs tulspecifikalva a kerdes, de ha megnezed az abrat, es a leirast, akkor az adodik, hogy azt szeretne, hogy az oldal kitoltse a bongeszo ablakat, ne legyen scrollbar magan az ablakon. Az also content block legyen fix meretu, es a felette levo content block pedig toltse ki a szabadon marado helyet, ami az ablak meretebol es az also blokk meretebol adodoan marad. Az also es a felso blokkban levo tartalom tulcsordulasa eseten legyen egy scrollbar az also es a felso blokkon magan, de ne a teljes weboldalon. Persze lehet, hogy felreertettem.

A kitölti a helyet, azt úgy értem hogy a böngészőablakban lévő helyet. Ha el van osztva kétfelé valami amiben az egyik terület fix méretű, akkor másik kitölti a maradék helyet.
Ez ablakmérettől függ, hogy mekkora lesz. Ha lehet akkor lehessen minimális mérete akár az egész layout-nak. Ha ettől kisebb a böngésző ablak, akkor kelljen csak scrollozni a böngészőn. Egyes div-ek belül scrollozhatónak kell lenniük.

( manfreed (nem ellenőrzött) | 2014. 10. 28., k – 22:19 )

Bocsi, most már túl késő van gondolkodni, úgyhogy kódot nem produkálok, de ezt egy sima táblázattal meg lehet csinálni, nem kell ehhez semmi trükközés, se komplex css, főleg nem JS

Ha valaki azzal jönne, hogy a táblázat nem szemantikus (a sereg div se) akkor meg lehet csinálni divekkel, seciton-ökkel, stb, csak használni kell a display: table, table-row, table-cell css szabályokat az elemeken, és úgy csinálni mint ha táblázat lenne.

( Qury v | 2014. 10. 30., cs – 14:09 )

Hasznalj bootstrap 3-t es a body tagek koze tedd be az alabiakat


<div class="row">
<div class="col-md-12 bg-primary">blue</div>
<div class="clearfix"></div>
<div class="col-md-1 bg-primary" style="width:100px; min-height:600px;">lila</div>
<div class="col-md-9">
<div class="col-md-12 bg-info" style="min-height:300px; overflow: scroll;">cyan</div>
<div class="col-md-12 bg-danger" style="height:300px; overflow: scroll;">piros</div>
</div>
<div class="col-md-1 bg-primary" style="width:100px;min-height:600px">Zold</div>
</div>