J'ai des problèmes avec le pied de page de mon site Web. Je veux que cela colle au bas de la page (après son contenu) Quelqu'un peut-il m'aider?
Edit: Je peux voir le pied de page avec mon deuxième écran (le plus grand) mais dans mon écran d'ordinateur portable, je ne peux voir que 1 / 4ème du pied de page. P>
CodePen Link! https://codepen.io/jimdiew/pen/zyrpqdp p>
HTML P>
*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } html { position: relative; width: 100%; height: 100%; } .site-container { display: flex; flex-direction: column; height: 100%; } .site-content{ flex:1; } body{ font-family: sans-serif; margin: 0px; padding: 0px; } .header-main{ background: white; height: 100px; width: 100%; } label.logo{ color: #98979b; font-size: 35px; line-height: 80px; padding: 0 50px; font-weight: bold; } .header-main ul{ float: right; margin-right: 20px; } .header-main ul li{ display: inline-block; line-height: 80px; margin: 0 5px; } .header-main ul li a { color: #aaabad; font-size: 17px; text-transform: uppercase; padding: 9px 15px; border: 3px; } .header-main a.active, a:hover { background: #6dc4c6; transition: .3s; } .header-main ul li a:hover { color: #ffffff; } /*SLIDER*/ html, body{ width: 100%; height: 100%; padding: 0; } slider { display: block; width: 100%; height: 100%; background-color: #98979b; overflow: hidden; position: absolute; } slider > * { position: absolute; display: block; width: 100%; height: 100%; background: #98979b; animation: slide 12s infinite; overflow: hidden; } slide:nth-child(1){ left: 0%; animation-delay: -1s; background-image: url(images/image-1.jpg); background-size: cover; background-position: center; } slide:nth-child(2){ left: 100%; animation-delay: 2s; background-image: url(images/image-2.jpg); background-size: cover; background-position: center; } slide:nth-child(3){ left: 100%; animation-delay: 5s; background-image: url(images/image-3.jpg); background-size: cover; background-position: center; } slide:nth-child(4){ left: 100%; animation-delay: 8s; background-image: url(images/image-1.jpg); background-size: cover; background-position: center; } slide:nth-child(5){ left: 100%; animation-delay: 11s; background-image: url(images/image-2.jpg); background-size: cover; background-position: center; } @keyframes slide{ 0% { left: 100%; width: 100%; } 5% { left: 0%; } 25% { left: 0%; } 30% { left: -100%; width: 100%; } 30.0001% { left: -100%; width:0%; } 100% { left:100%; width:0%; } } .site-footer { width: 100%; height: auto; margin: auto; background: #6dc4c6; padding: 15px 0px; bottom: 0; right: 0; left: 0; margin-bottom: 0px; overflow: hidden; } .footer-social-icons{ width: 100%; height: auto; margin: auto; } .footer-social-icons ul { margin: 0px; padding: 0px; text-align: right; } .footer-social-icons ul li { display: inline-block; width: 30px; height: 30px; margin: 0px 10px; border-radius: 100%; background: white; } .footer-social-icons ul li a{ color: #98979b; font-size: 10px; padding-right: 6px; } .footer-social-icons ul li a i { line-height: 30px; } .footer-social-icons ul li a:hover i{ color: #98979b; } .site-content { background-color: #98979b; position: relative; } .row{ display: flex; flex-wrap: wrap; padding: 0; } .column { flex: 25%; max-width: 25%; padding: 0; } .column img { margin-top: 0px; vertical-align: middle; width: 100%; } .container { margin-top: 0px; vertical-align: middle; width: 100%; } .content { position: relative; width: 100%; max-width: 400px; margin: 0; overflow: hidden; } .content .content-overlay { background: rgba(109, 196, 198, 1); position: absolute; height: 99%; width: 100%; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .content:hover .content-overlay{ opacity: 0.5; } .content-image{ width: 100%; } .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .content:hover .content-details{ top: 50%; left: 50%; opacity: 1; } .content-details h1{ color: #fff; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 0.5em; text-transform: uppercase; } .content-details p{ color: #fff; font-size: 0.8em; } .fadeIn-bottom{ top: 80%; } /* PARA MOBILE */ @media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } .container{ width: 33.33333%; } } @media (max-width: 640px) { label.logo { font-size: 40px; text-align: center; width: 100%; padding:0; display: block; } .container{ width: 100%; } ul{ position: fixed; width: 100%; height: 30vh; background: #6dc4c6; top: 80px; left: 0; text-align: center; } nav { color: white; } nav ul li { display: block; } nav ul li a { font-size: 20px; color: white; } a:hover, a.active{ background: none; color: #0199a7; } slider{ margin-top: 240px; } .column { flex: 100%; max-width: 100%; } }
3 Réponses :
J'aurais besoin de voir le code concerné en cours d'exécution plus précis, mais il aura probablement besoin de quelque chose comme ceci:
Essayez de retirer le bas: 0; de la classe de page de pied de page } p> p>
J'ai essayé de supprimer la position et la ligne de fond, mais rien ne change: /
Je suppose que vous n'essayez pas d'avoir le pied de page de pied de page au bas de la fenêtre lorsque vous faites défiler, mais faites-la apparaître au fond même de la page après avoir défilé le contenu de tout le contenu.
Si toutes vos pages sont longues, le moyen plus simple de le faire est simplement de laisser le pied de page assis naturellement dans le flux de la page: Supprimer Si vous voulez qu'il reste au bas de la fenêtre lorsque le contenu est court et si vous êtes assis au bas de la page lorsque le contenu est long, il serait préférable de modifier les modifications suivantes: P> Premièrement, supprimer Ensuite, ajoutez ce qui suit à Position: absolu à partir de
.Site-piedher code> et supprimer
hauteur: 100% code> à partir de
html, corps code>. Cependant, s'il existe une page (ou un navigateur) où la fenêtre est plus grande que le contenu de la page, le pied de page ne colle pas au bas de la page avec cette solution. P>
Option 2 H2>
hauteur: 100% code> et
Padding: 0 code> à partir de
html code> et
html, corps code>. (Notez qu'il serait préférable de consolider votre
HTML code> et
corps code> car ce sera ennuyant de résoudre tout ce qui puisque vos styles en aval qui écrasera vos styles plus élevés dans le fichier car ils sont au même niveau de spécificité.) p>
Corps Code>: P>
min-height: 100vh;
position: relative;
padding-bottom: 60px;
Merci beaucoup!
Veuillez indiquer votre code pertinent ici sous forme de texte, de préférence un exemple reproductible.