Odstránenie pevnej päty a dostať imaged pod hlavičkou - html, css

Web som vytvoril z html šablóny.Snažil som sa odstrániť pätu z pevnej polohy a umožniť, aby sa obrázky na mojej indexovej stránke zobrazovali medzi hlavičkou a pätou v plnej výške. Momentálne sú obrázky skryté za hlavičkou a pätou. Odkaz na môj web http://vizoviphotography.com. Máte nejaké návrhy, ako to vyriešiť?

odpovede:

Problém, s ktorým sa stretávate, je ten, ktorý ste použili

.epic-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

a

.epicSlider.slider-wrapper {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;        /* this really is a problem */
top: 2px;
left: 1px;
}

Vďaka nim posúvač vždy vyplní 100% tela

najskôr môžete zo štýlu .epic-wrapper odstrániť height: 100% a urobiť ho relatívnym a odstrániť výplň v hornej časti #wrapper.

.epic-wrapper {
position: relative;
width: 100%;
}

.no-touch #wrapper {
/* padding-top: 130px; */
}

Potom navrhujem, aby ste napísali trochu JQuerytento háčik do „zmeny veľkosti“ a dynamicky vypočítať výšku „.slider-wrapper“. Budete musieť získať (výška tela - (výška záhlavia + výška päty)) a potom túto vypočítanú hodnotu použiť na výšku .epicSlider.slidewrapper (alebo #epicSlider, ak chcete). Nezabudnite zohľadniť okraje a hranice.

niečo podobné

.epicSlider.slider-wrapper {
position: absolute;
overflow: hidden;
width: 100%;
height: 670px;
top: 2px;
left: 1px;
}

Je potrebné zaobchádzať so zmenou veľkosti tak, aby keď používatelia pretiahli okno, nastavila podľa toho výšku.