| Autor | Zpráva | ||
|---|---|---|---|
| Suta Profil |
Jde vyřešit následující případ pomocí css bez dopočítávání javascriptem?
Prosím o radu, jak vyřešit následující požadavek. Jde mi především o ony dva vnitřní elementy, aby první mohl mít pohyblivou výšku a spodní element začínal vždy pod prvním elementem, ale dole byl "ukotvený" a zobrazily se posuvníky v případě potřeby... Zkoušel jsem spoustu řešení, jak pomocí pozicování, tak pomocí tabulek, ale vždy jsem narazil.. Předem díky za jakýkoliv nápad. 
Ještě přidávám ukázku z praxe, kde případ řeším. Na obrázku je vidět, že horní část obsahuje proměnlivý počet záložek a spodní obsahuje textový obsah, u něhož se v případě, že by byl delší, musí zobrazit posuvník. 
|
||
| Plaváček Profil |
#2 · Zasláno: 17. 10. 2012, 11:57:52
Suta:
Zkoušel jsi použít tabulku? |
||
| Suta Profil |
Reaguji na Plaváčka:
Zkoušel, mými pokusy neúspěšně. Tabulky jsem na "pozicování" či design nikdy nepoužíval, takže se dá říci, že zkušenosti se složitějším použitím nemám žádné. Zkoušel jsem nějaké kombinace s table-layout: fixed a použití divů uvnitř td, požadovaného výsledku jsem nedosáhl. |
||
| Plaváček Profil |
#4 · Zasláno: 17. 10. 2012, 16:20:40
Suta:
Nemám moc času, takže jenom obecně. Tohle bude trošku oříšek, a tak bych myslel, že bude lepší lehce změnit zadání - respektive vymyslet jiný způsob, jak požadované bloky poskládat. |
||
| Suta Profil |
#5 · Zasláno: 17. 10. 2012, 16:24:05
Reaguji na Plaváčka:
Díky za reakci, dospěl jsem ke stejnému názoru. Sice ještě stále trošičku doufám, že se objeví někdo, kdo přijde s možným řešením, nicméně už nyní pracuji na přepracování myšlenky. |
||
| Plaváček Profil |
Suta:
Možným řešením by asi byla nějaká javascriptová zhůvěřilost napsaná na míru, ale za to ruku do ohně nedám, protože nejsem profík na javascript. Jenom pomocí CSS a HTML ale asi požadované funkčnosti nedosáhneš. Nicméně ber to jen jako můj první pohled, zatím jsem se tím problémem do hloubky nezabýval :) |
||
| Martin Staněk Profil * |
#7 · Zasláno: 17. 10. 2012, 17:41:30
Cross-browser to asi nebude mít rozumné řešení... V Chrome je toho možné docílit takto: http://codepen.io/anon/full/bdmpc
|
||
| pavelbier Profil |
Já dospěl k něčemu takovému, ale není to též cross-browser: http://jsfiddle.net/VAJCD/ a nebo http://codepen.io/anon/pen/fgIsc
Podpora je celkem mizerná ... http://caniuse.com/#feat=flexbox |
||
| JosefStepanek Profil |
Já bych to nekomplikoval… Respektive nevidím rozumný důvod, proč by vyšší počet záložek měl omezovat prostor pro chat.
Pak by stačilo jednoduše toto (vyšel jsem z příkladu od @pavelbier): http://jsfiddle.net/3VGeg/1/ (Co jsem zběžně kontroloval, tak Firefox, Chrome, Opera i IE 7 a výš jsou ok.) Kdyby to vážně nestačilo, tak dopočítávat v JS výšku v callbacku ajaxu, který (předpokládám) bude přidávat/ubírat záložky, je opravdu maličkost (a IMO menší zlo, než si dělat těžkou hlavu s CSS kompatibilitou, které se stejně nedosáhne)… BTW http://codepen.io nedoporučuju (aspoň ne pro tyto účely), protože jak se zdá, nefunguje v IE7 a 8 (= na nic). |
||
| Str4wberry Profil |
#10 · Zasláno: 17. 10. 2012, 20:22:40
Reakce na JosefStepanka:
„možná mi něco uniká“ Ano, .container má mít definovanou výšku.
Reakce na Sutu: Je nějaký důvod nepoužít JS? Stačilo by si třeba změřit výšku modrého boxu, odečíst ji od výšky obalu a nastavit ji spolu s overflow: auto pro box zelený.
|
||
| Suta Profil |
Reaguji na všechny:
Samozřejmě že není problém sáhnout po javascriptu, to je maličkost. Mě zajímalo, zda-li jde tento konkrétní případ vyřešit bez něj, já si na tom vylámal zuby a nic.. Je to zřejmě oříšek, možná, kdyby byl někdo skutečně zběhlý v tabulkách, tak by to šlo nějakou kombinací s nimi. Já osobně však tento případ zavírám, díky všem za postřehy a pokusy. JosefStepanek: „Já bych to nekomplikoval… Respektive nevidím rozumný důvod, proč by vyšší počet záložek měl omezovat prostor pro chat.“ Šlo mi o to, abych zbytečně prostoru pro jednotlivé záložky (seznam lidí, s nimiž aktuálně chatuji a mohu mezi nimi přepínat) nemusel definovat výšku. Mohl bych nadefinovat např. výšku pro dva řádky a přidat posuvník v případě, že by záložek bylo více.. nicméně tím už by prostor pro záložky zabíral permanentně dva řádky a v případě, že bych chatoval pouze s jednou osobou, tak by byla část pro textový obsah komunikace zbytečně posunuta o jeden řádek. Proto jsem se snažil docílit nastíněné variability. |
||
| martines23 Profil * |
#12 · Zasláno: 18. 10. 2012, 09:19:54
co takhle?
http://codepen.io/anon/pen/ErjyJ |
||
| Trejpa Profil |
#13 · Zasláno: 18. 10. 2012, 09:20:42
Suta:
V tabulkách je to jednoduché, musí se ale použít zpětně kompatibilní režim vykreslování (bez doctype), aby se na tabulku dala použít vlastnost height. Podívej se na Rozdělení výšky stráky tabulkou. |
||
|
Časová prodleva: 12 let
|
|||
0