web-dev-qa-db-fra.com

CSS: pied de page se chevauchant contenu, autres problèmes

J'ai cherché des problèmes similaires ici et ailleurs, mais je n'arrive pas à trouver de réponse définitive. Lorsque j'ajoute suffisamment de texte à une page pour qu'elle atteigne le pied de page, celui-ci chevauche simplement le texte. Même chose si je réduis la taille de la fenêtre du navigateur pour obliger le pied de page et le conteneur qui contient le contenu à se rencontrer. Parfois, cela se manifeste également dans le "conteneur", c'est-à-dire la partie gris pâle, qui se contracte pour une raison quelconque, même si elle devrait toujours occuper 100% de la hauteur.

C'est le genre de choses qui me garde éveillé toute la nuit, alors je ne pense pas très clairement. Je suis sûr que c'est quelque chose de stupide et facile à réparer, mais je ne suis pas un designer professionnel et je ne vois certainement pas le problème.

Ci-dessous, mon CSS, et un JSFiddle que j'ai créé avec toutes les parties pertinentes d'une page.

html, body {
    margin: 0;
    padding: 0;
}

html, body {
    background: #252525; 
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}

body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}

#container {
  color: white;
  margin-bottom: 2em;
  min-height: 100%;
  overflow: auto;
  padding: 0 2em;
  text-align: justify;
}

#footer {
  bottom: 0;
  color: #707070;
  height: 2em;
  left: 0;
  position: fixed;
  font-size: small;
  width:100%;
}

Une maquette d'une page typique.

htmlcsssticky-footer
9
Flawedspirit

Change ça:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Démo

8
Sagar Guhe

Voir DÉMO

J'ai apporté quelques modifications CSS. Regarde. J'espère que cela vous aidera.

CSS mis à jour

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}
5
NikeshPathania

Toute personne tombant sur cette question en 2017 devrait savoir qu’une excellente option a été inventée pour atténuer les problèmes de mise en page tels que celui-ci, flexbox . 

En gros, tout ce que vous avez à faire est de définir <body> sur:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Appliquez ensuite flex:1 1 auto à la section "principale" ou centrale, dans ce cas, #container, ce qui le fera s’étendre verticalement pour remplir l’espace disponible, en veillant à ce que le pied de page reste en bas:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

Nous ajoutons align-items dans le parent flex pour gérer également le centrage transversal (dans notre cas, horizontal):

Voici un exemple d'extrait de ce qui précède:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}
<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>

3
sweaver2112

D'abord écrire ce code

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;

}

et maintenant définir les requêtes de médias

@media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;

} }

j'espère que ceci vous aidera :)

1
Amol Impal

Je crois que vous cherchiez un pied de page collant qui reste en place sans être fixé au bas de la page (donc pas de chevauchement) Je voulais ajouter cette réponse parce que pour moi (cela a fonctionné) et que c'est plus proche de ce que je cherchais. 

Solution

La solution vient de Chris Bracco et je vais détailler ce dont vous avez besoin pour reproduire l’effet:

HTML

Votre HTML soit comme:

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

Vous devrez ajouter dans votre css quelque chose comme:

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

Exemple

C'est comme la base dont vous avez besoin pour créer le pied de page collant. Voici un exemple (avec encore plus de CSS pour un meilleur rendu). 

html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .body-for-sticky {
      position: relative;
      min-height: 100%;
      padding-bottom: 6rem;
    }
    
    .sticky-footer {
      position: absolute;
      bottom: 0;
    }
    
/* for the rendering */

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    .footer {
      right: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sticky footer</title>
    <style>  </style>
</head>

<body class="body-for-sticky">

  <div class="demo">
    <h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>

    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to Push it to the bottom of the viewport naturally.</p>

    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>

    <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
  </div>

  <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

</body>

</html>

Développez l'extrait et regardez le résultat en taille réelle pour voir comment il fonctionne.

0
Sylhare