CSS: le Pied de page chevauchement du contenu, d'autres pépins

J'ai regardé autour pour des problèmes similaires ici et dans d'autres endroits, mais je n'arrive pas à trouver une réponse définitive. Quand j'ai ajouter suffisamment de texte d'une page qu'elle aurait à le pied de page le pied de page tout simplement chevauche le texte. Même chose si je diminue la taille de la fenêtre du navigateur pour forcer le pied de page et le conteneur qui contient le contenu pour répondre. Parfois, cela se manifeste également dans le "conteneur" aka le gris plus une partie, à la réduction pour une raison quelconque, même si elle doit toujours être prise jusqu'à 100% de la hauteur.

C'est le genre de trucs qui me tient debout toute la nuit, donc je ne suis pas de penser très clairement. Je suis sûr que c'est quelque chose de stupide et facile à corriger, mais je ne suis pas un designer professionnel et je suis certainement manquant ce qu'est la question.

Ci-dessous est mon CSS, et un JSFiddle que j'ai fait avec toutes les parties 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 classique.

InformationsquelleAutor Flawedspirit | 2013-09-24
  1. 10

    Changer cela:

    #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

    • Ce certainement contribué à empêcher le contenu et le pied de page de chevauchement, mais il y a toujours le problème avec le "raccourcissement" de la div conteneur lorsque la fenêtre du navigateur est de plus en plus petits, puis vous faites défiler jusqu'à la fin. C'est visible même dans la démo vous a lié, malheureusement.
    • Bon, je l'ai fait. Enterré dans certains oubliés depuis longtemps (jusqu'à maintenant), la sauvegarde, j'ai déterré le code source d'une version précédente de mon site que je connaissais a fonctionné comme je le voulais. La mise en œuvre est à jsfiddle.net/zgMYu/12 pour référence future. Il signifie que j'ai de mon nid réel contenu de la page dans encore une autre couche de "la classe de contenu", mais si ça fonctionne, ça fonctionne, non?
    • Merci de sauver ma santé mentale.
    • que faire si le pied de page de la position est fixe et le même problème persiste. Dans le sens que le paragraphe se chevauchent un pied de page (position fixe).Une solution pour cela?
    InformationsquelleAutor Sagar Guhe
  2. 6

    Voir DÉMO

    J'ai fait un peu de CSS changements. Un coup d'oeil. J'espère que ça va vous aider.

    Mise à jour de CSS

    #footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}
    • Statique fait. Merci!
    InformationsquelleAutor NikeshPathania
  3. 6

    Quelqu'un tomber sur cette en 2017 faut savoir qu'une grande option a été inventé pour alléger la mise en page des maux de tête comme cela, flexbox.

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

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

    Puis appliquer flex:1 1 auto à la "main" ou de la section du milieu, dans ce cas #container, ce qui permettra de développer verticalement pour remplir l'espace disponible, en assurant le pied de page sera bâton vers le bas:

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

    Nous avons ajouté align-items:center dans le flex parent pour gérer la croix-axe de centrage (dans notre cas, à l'horizontale).

    Voici un exemple extrait de la ci-dessus:

    CSS:

    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;
}

    HTML:

    <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>

    InformationsquelleAutor Scott Weaver
  4. 1

    Premier à é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 des requêtes de média

    @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%;

    }
    }

    espérons que cela vous aidera 🙂

    InformationsquelleAutor Amol Impal
  5. 0

    Je crois que vous avez été la recherche d'un collant, pied de page qui reste tout en n'étant pas fixé au bas de la page (donc pas de chevauchement). Je voulais ajouter cette réponse parce que pour moi (il a travaillé) et il est proche de ce que je cherchais.

    Solution

    La solution vient de Chris Bracco, et je vais détailler ce que vous devez reproduire l'effet:

    HTML

    HTML de votre être:

    <html>

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

</html>

    CSS

    Vous devez 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 un peu la base, vous devez créer le collant pied de page. Voici un exemple (avec un peu plus de CSS pour un meilleur rendu).

    CSS:

    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%;
    }

    HTML:

    <!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>

    Élargir l'extrait de code et de voir le résultat complet de la taille pour voir comment il fonctionne.

    InformationsquelleAutor Sylhare
  6. -1
     #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }
    • je sais je suis en retard. vérifier ce code. si vous utiliser bootstrap de modifier le "#pied de page "à la classe que vous enveloppent le pied de page comme".footer1'
    InformationsquelleAutor Reza Rouf