Printable View
Mám takový problém http://www.citric.cz/test - jak roztáhnout levý subdiv tak, aby měl 100% výšku v rámci jeho rodiče? Jde mi hlavně o to, aby se ta čára, která je naznačená tam uprostřed roztáhla na 100% výšku a měla přitom zespoda a zeshora pár px mezeru oproti těm spodním čarám...
prvy odkaz z google:
http://www.webmasterworld.com/forum83/200.htm
dufam, ze pomoze...
Strejdy Google jsem se ptal :)... Nemám problém se 100% výškou DIVu obecně (ten class="obsah" má height 100%), ale v tomhle konkrétním případě (height: 100%; v tomhle případě nedělá to, co bych čekal)...
zkus tohle:
Kód:div.levy {
float: left;
width: 25%;
height: 90%;
padding: 10px 15px 10px 15px;
}
div.levy_obsah {
border-right: 1px #bdbdbd solid;
height: 100%;
}
Něco podobného jsem taky zkoušel ... Ale v IE to stránku protáhne dolů a ve FF to zničí patičku :/...
To co psal Proxymus funguje s 95%, s 100% to opravdu posune paticku...
I s 95% je to takové "čudné", ale je to posun kousek dopředu...
Moje řešení je použít tabulky, fungovat to bude všude a bez problémů... Moc rád bych měl design jen v DIVech, ale až to bude správně fungovat všude...
Jeste by to asi slo pres JavaScript, ale to je takove reseni na...
zjistit si skutecnou velikost klientske casti okna a podle nastavit vysku tech divu.
To mně napadlo, ale co když někdo bude mít vypnutý JavaScript ... A kdoví jak by se ten skript choval někde v Safari bo něčem podobném... :)
Jj, to je bohuzel jasne riziko. Mozna bych to vyresil tak, ze bych nechal styl jak uz ti ho tady nekdo upravil (i s tim ujetim dolu)...a zkusil pouzit javascript - ve vetsine pripadu js pojede imo.Citace:
Původně odeslal Kaltas
Pripadne upustit od roztazeni na celou stranku a roztahovat pomoci js..kde to nepujde, bude stranka neroztazena, kde to pujde, bude vse vypadat ok :)
Nebo tam vrazit tabulky :))...Citace:
Původně odeslal Anduril
http://citric.cz/vodnifotbalek/ - moc jsem se s tím zatím nedělal :) kód je sice validní, ale neučesaný...
Nenene, tohle je tavej klasickej haluz resi se to pres 2 dïvy ktere budou vedle sebe ale do kodu se uvadeji do sebe, tem se nastavim pozadi - vertikalni opakovani neceho. A do toho se potom supnou jeste dalsi 2 divy s float left.
Mensi priklad jak to vypada u 3 sloupcoveho layoutu, jinak to kdyz odstranis ten div s middle right a nastavis foat: left tomu prostrednimu aby dosedal na krajni, tak z toho mas 2 sloupcovy.
Tady to je minimalni stranka, ze to okoukej, chce to zkouset, zezacatku jsem to taky nepobiral :)
http://www.pixy.cz/blogg/clanky/css-3col-layout/
Tohle imho neni tento problem..tady je problem predevsim s vyskou..roztahovanim na 100% klientske casti okna prohlizece..nikoliv usporadani vedle sebe nebo co.Citace:
Původně odeslal Skodik
Nene, je to co potrebujes, kazdy sloupec se zvetsuje VCETNE POZADI - tedy tve cary podle obsahu. No ale udelej to jak chces, ovsem tohle je jedine ciste CSS reseni, imho.
btw: nezapomen na to u tohodle dolu clear: both;
Tohle IMHO není to co potřebuji... Nejde mi o to aby všechny sloupce měly stejnou velikost, to není problém - něco podobného tam už mám (DIVy levy a pravy a spodni). Problém je v tom, že height:100%; u DIVu levy_obsah se nechová tak jak bych si přestavoval...
Tenhle problém je fakt taková klasika :-)
Já to taky řešim obrázkem na pozadí, ale u tvýho layoutu by asi byl problém s marginama, protože zvětšujou plochu stránky, asi bych dělal i ty vodorovný čáry pozadim, aby se to nemuselo marginovat. Určitě by to šlo vyladit, ale bylo by to asi docela hraní, muselo by se to určitě celý překopat...
Nestačilo by třeba tohle?
BTW v IE to máš trošku šouplý, já když chci nalepit patičku na spodek stránky, tak jí tam dávamKód:div.levy {
margin-top:1%;
float: left;
width: 25%;
height: 88%;
border-right: 1px #bdbdbd solid;
}
div.levy_obsah {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
}
padding proto, že tam často mam nějakej oddělovač, jako je právě horizontální čára, ale dělaná pozadim, a potřebuju jí vykreslit kousek nad textemKód:clear:both;position:absolute;bottom:0;left:0;padding-top:Xpx;
Díky :) zkusím...