Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Marek Burda
Člen
Avatar
Marek Burda:15.6.2017 20:00

Ahoj - Mám problém z nastavením responzívnej výšky divu. Šírka samozrejme nastavená na 100% no výšku som bohužial musel nastaviť na pixely aby som vám ukázal čo je mojim cieľom.
Prikladám obrázok (dole) a kódy:

.area-hold
{
width: 100%;
height: 430px;
}


.area
{
display: inline-block;
width: 10%;
height: 16.6%;
margin: -3px;
border-style: solid;
border-width: 0.2px;
border-color: grey;
}

Vysvetlenie : Area hold je div v ktorom sa nachádzajú area divy (60) - Šírka divov area sa samozrejme nastaví jendoducho : 100% : 10 divov : 10% na 1 div. Probém je u výške. auto; nefunguje - akonáhle použijem auto, divy sa stlačia na 0px takže majú len šírku ale žiadnu výšku. ĎAlší problém je : divy nič neobsahujú. Sú len vyfarbené - takže sa im výška nemôže nastaviť napríklad podľa veľkosti textu či podobne. Nejaká finta ako správne nastaviť výšku ? Samozrejme bol by som rád keby bola finálna výška jedného štvorca rovnaká ako šírka (ide predsa o štvorce to dáva logiku :D )

Ďakujeeem

 
Odpovědět
15.6.2017 20:00
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Marek Burda
Honza Bittner:15.6.2017 20:11

Můžeš použít jednotku vw (vieport width), viz má ukázka https://jsfiddle.net/836popre/

Podle http://caniuse.com/#… je jednotka "vw" (konkrétní použití "vw") plně podporováno v majoritě prohlížečů, takže snad pohoda. :-)

Editováno
Nahoru Odpovědět
15.6.2017 20:11
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:15.6.2017 20:20

Případně, pokud se ti nelíbí závislost na viewportu, lze využít i "hack" s padding-bottom (zachováš padding bottom stejný jako width, pro 4x4 to bude width: 25%; padding-bottom: 25%;)

Viz https://jsfiddle.net/836popre/2/

A navíc s rodinou jednotek vw je problém, že ti do toho počítají i scroll bar ("Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."), takže je tato druhá možnost IMHO lepší

EDIT: 2. možnost evidetně nefunguje v Edge

Editováno
Nahoru Odpovědět
15.6.2017 20:20
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Marek Burda
Honza Bittner:15.6.2017 20:41

No, evidentně má Edge (vlastně ono to funguje co koukám do Firefoxu jenom v Chrome) nějaký problém s flexboxem a prázdným obsahem a nemám teď čas vyzkoumat kde by mohl být problém. Verze s 0px u fontu funguje každopádně všude – https://jsfiddle.net/836popre/5/

Kdybys přišel na správné řešení s flexboxem, určitě pošli. ;)

Nahoru Odpovědět
15.6.2017 20:41
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Marek Burda
Honza Bittner:15.6.2017 20:47

No a jelikož jsem ještě vyzkoušel použití pseudo elementu, což je úplně nejtopovější řešení (a funguje všude, co jsem testoval) s flexboxem (takže nemusíš přepínat font-size či dělat podobné nesmysly); viz https://jsfiddle.net/836popre/7/

Sorry za menší spam, ale máš tu X méně či více fungujících řešení, doporučuji toto… :D

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
15.6.2017 20:47
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Marek Burda
Člen
Avatar
Marek Burda:15.6.2017 23:03

Pozrel som sa na tie kódy, niečo poskúšal , no akonálhe som tam vložil dalšie veci začalo tomu šibať.
Každopádne pozrel som si niečo o tej vw a pomohlo to :) stačilo zmeniť height na 25vw vid kod dole. Zajtra sa pozreim či to nemá nejaké problémy na iných zaraideniach pretože mi to prišlo moc jendoduché hlavne potom čo som videl všetky tvoje kody :D Ale dakujem velmi pekne za tvoj čas :)

.area-hold
{
width: 100%;
height: 25vw;
}


.area
{
display: inline-block;
width: 10%;
height: 16.6%;
margin: -3px;
border-style: solid;
border-width: 0.2px;
border-color: grey;
}
 
Nahoru Odpovědět
15.6.2017 23:03
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Marek Burda
Honza Bittner:16.6.2017 9:17

To tvoje mi jaksi nefunguje, hlavně kvůli tomu, že určuješ výšku na .area-hold.

Nahoru Odpovědět
16.6.2017 9:17
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Marek Burda
Člen
Avatar
Odpovídá na Honza Bittner
Marek Burda:26.6.2017 11:26

Jop pretože area hold sa nastaví automaticky podľa %

 
Nahoru Odpovědět
26.6.2017 11:26
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.