Supprimer le pied de page fixe et obtenir une image sous l'en-tête - html, css

J'ai obtenu un site Web construit à partir d'un modèle html. "J'essaie de supprimer le pied de page d'une position fixe et de faire apparaître les images à pleine hauteur entre l'en-tête et le pied de page sur ma page d'index. Pour le moment, les images sont masquées derrière l'en-tête et le pied de page. Lien de mon site Web http://vizoviphotography.com. Des suggestions pour résoudre ce problème, s'il vous plaît?

Réponses:

Le problème auquel vous êtes confronté est que vous avez utilisé

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

et

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

Celles-ci vont toujours faire en sorte que le curseur remplisse 100% du corps

tout d'abord, vous pouvez supprimer la hauteur: 100% du style .epic-wrapper et la rendre relative et supprimer le rembourrage en haut de #wrapper.

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

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

Je vous suggère alors d'écrire un peu de JQueryce crochet dans "redimensionner" et calculer la hauteur de ".slider-wrapper" dynamiquement. Vous devrez obtenir la (hauteur du corps - (hauteur de l'en-tête + hauteur du pied de page)), puis appliquer cette valeur calculée à la hauteur de .epicSlider.slidewrapper (ou #epicSlider si vous le souhaitez). N'oubliez pas de tenir compte des marges et des bordures.

pour obtenir quelque chose comme

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

Vous devez gérer le redimensionnement de sorte que lorsque les utilisateurs font glisser la fenêtre autour d'elle ajuste la hauteur en conséquence.