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
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
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
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 *
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
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 *
co takhle?
http://codepen.io/anon/pen/ErjyJ
Trejpa
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: