Archiv štítku: container

HTML, Pozicování

Absolutní nebo procentuelní pozicování uvnitř kontejneru

Napsat komentář

Pokud chcete použít absolutní pozicování nebo nastavení rozměrů pomocí procent, ale pouze v rámci určitého kontejneru (např. zarovnat prvky nalevo od středu – tedy doprava na levé polovině stránky; nechat element vyplnit nadřazený kontejner, apod.), můžete k tomu použít relativní pozici kontejneru:

.container {
    position: relative; 
}
.absoluteChild { 
    position: absolute; right: 0; 
}
.fillChild {
    width: 90%; height: 100%; margin: 0 auto;
}

Po použití zde uvedených CSS stylů dojde k tomu, že absoluteChild bude zarovnáno na pravou stranu kontejneru container, zatímco fillChild bude vyplňovat kontejner na výšku a zabírat 90% jeho šířky (přičemž bude zarovnáno na střed). Oba prvky se budou samozřejmě překrývat díky tomu, že absoluteChild je absolutně pozicované.

Mobilní, Ovládání

Skrolování prstem

Napsat komentář

Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.

Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.

Pro povolení ale stačí použít jednoduchý styl:

.container {
    /* nastaví scrollování na desktopu */
    height: 100%;
    overflow: auto;
    
    /* povolí skrolovat obsah prvku
       pomocí posouvání prstem */
    -webkit-overflow-scrolling: touch;
}

Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).