L'ajout d'un pied de page qui est toujours affiché en bas de l'écran?

Comment puis-je ajouter un pied de page qui est toujours au bas de l'écran, même lorsque le contenu de la page sont très petites

e.g de problème, disons que j'ai une page qui n'ont pas grand-chose sur l'écran, le pied de page, par conséquent, devient dans le milieu de l'écran. Puis-je m'assurer que si la page n'a pas beaucoup de contenu, puis le pied de page juste en bas de l'écran?

Mise à JOUR

Je veux juste un pied de page qui est au bas de l'écran quand il n'y a pas assez de contenu pour remplir tout l'écran (j'.e je ne veux pas le pied de page montrant dans le milieu de l'écran) et puis si il y a assez de contenu pour qu'il suffit d'aller au bas de la page.

Double Possible de Comment puis-je forcer mon pied de page à coller au fond de la page en CSS?. À partir de la question, il semble que vous êtes à la recherche d'un collant-pied de page?

InformationsquelleAutor | 2011-05-29

11

Vous êtes après un "sticky footer", cet article montre quelques techniques que vous pouvez utiliser:
- https://css-tricks.com/couple-takes-sticky-footer/
Voici la flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

HTML:
```
<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
```
CSS:
```
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
```
InformationsquelleAutor thirtydot
13

utiliser les propriétés css suivantes:
```
position: fixed;
bottom: 0px;
```
- cela fonctionne très bien, mais je ne veux pas qu'il soit collant, pied de page, si il y a beaucoup de contenu sur la page, j'ai juste envie d'aller vers le bas de la page.
- il y a beaucoup de contenu sur la page, j'ai juste envie d'aller vers le bas de la page" qui est exactement ce collant, pied de page n': ryanfait.com/sticky-footer - pas beaucoup de contenu: jsfiddle.net/KMQxC vs beaucoup de contenu: jsfiddle.net/KMQxC/1 Edit: le commentaire sur votre question: "i just want one that is at the bottom of the screen when there is not enough content to fill the whole screen" - maintenant, je suis vraiment confus de ce que vous souhaitez. Désolé si je ne suis pas la compréhension de vous ici.
- thirtydot my bad, je pensais que sticky footer est toujours au bas de l'écran et pas en bas de la page, je wil essayer l'exemple u liés à, désolé.
InformationsquelleAutor Ciprian Radu
1

Voici une CSS, la seule solution, pas de jQuery nécessaire. Faire de l'emballage hauteur minimale de 100% et la position relativement, puis la position du pied de page tout à fait en bas à gauche:
```
#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}
```
Source
- Lien seules réponses seront probablement supprimés, essayez de le rendre autonome réponse, en gardant le lien de référence 🙂
- Est-ce mieux?
InformationsquelleAutor ZurabWeb
0

Vous aurez envie d'utiliser une position fixe de l'élément qui est lié à la partie inférieure de la page.

Dire que vous utilisez un div pour englober le pied de page, vous aurez envie d'un peu de css comme ceci:
```
div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}
```
Vous voudrez probablement mettre à jour la hauteur et la largeur lorsque l'utilisateur redimensionne la forme. Vous aurez probablement besoin de redimensionner la largeur sur pageload ainsi.

InformationsquelleAutor tjarratt

Vous pouvez également utiliser le collant pour la position indiquée ci-dessous:

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

Vous pouvez exécuter ce code pour voir si c'est le fixe type de pied vous
la recherche d'.

CSS:

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>

InformationsquelleAutor Joseph Hoxsey

Vous devez vous connecter pour publier un commentaire.