CSS pied de page width:100% des causes de défilement horizontale

je vais avoir du mal à donner un pied de largeur 100%, il provoque un défilement horizontale u peut voir quelque chose ? Quand je baisse les 100%, il fait une barre orange sur le côté parce que c'est l'arrière-plan, j'ai lu que le fait d'avoir un rembourrage sur l'élément pourrait causer, mais je suis assez sûr il n'y a pas de rembourrage présents sur le contenu de ma barre de pied de page si quelqu'un pourrait-il vous aider? 

/* CSS Document */
/*-- RESET | Based on Eric Meyer --*/
ol, ul {
list-style: none;
padding:0px;
}
li {
line-height:25px;   
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl { 
background: white; position: fixed; z-index: 99999; 
}
.bl, .br {
top: 0; bottom: 0; width: 5px; 
}
.bt, .bb {
left: 0; right: 0; height: 5px; 
}
.bt { 
top: 0; 
}
.br { 
right: 0; 
}
.bb { 
bottom: 0; 
}
.bl { 
left: 0;
}
/*-- MAIN --*/
html, body { 
height: 100%; 
}
body {
text-transform: uppercase;
background: #FCD9CA; 
}
.clear { 
clear: both; overflow: hidden; 
}
.sidebar {
padding: 15px 0;
border-top: 1px solid black;
border-bottom: 1px solid black; 
}
.sb-slider {
padding-top:0px;
margin-top:0px; 
}
.container {
padding-bottom:100px;   
}
.logo {
padding-left:15%;
position:relative;
top:125px;
margin: 0 auto; 
}
.top {
padding-left:5%;
position:relative;
top:200px;
margin: 0 auto;
}
.footercontact {
padding: 15px 0;
}
.footer {
padding-left:5% 
}
footer {
border-top: 1px solid black;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
background:#fff;
}

j'ai fait un violon pour vous montrer le problème
http://jsfiddle.net/9gh3ht48/2/

  • Essayez de définir margin: 0 sur html/corps. Et par pitié, ensemble z-index à quelque chose de significatif, comme 2; je doute fortement que vous avez à 99 999 couches sur votre page.
  • Vous avez besoin box-sizing: border-box; probablement, et si vous êtes vraiment intéressé dans le remplissage de la fenêtre d'affichage, vous seriez mieux avec width: 100vw; au lieu de 100%.
InformationsquelleAutor Sjoerd de Wit | 2014-08-20
  1. 8

    Comme @Lal mentionné le problème est causé par le padding à gauche sur .footer.

    Je suis en supposant que ce remplissage est une partie nécessaire de votre dessin afin de serait une meilleure solution pour régler le box-sizing propriété de votre pied de page à border-box:

    .footer {
padding-left:5% 
box-sizing: border-box;
}

    DÉMO

    Modifier

    Ok essayez ceci:

    DÉMO

    .footer {
padding-left:5%;
margin: 0;
}
    • Merci cela aurait été une meilleure solution, mais ça ne marche pas 🙁
    • Cela a fonctionné pour moi. J'avais un peu de rembourrage supplémentaire sur le conteneur parent qui a été l'origine de la barre de défilement horizontale.
    InformationsquelleAutor Turnip
  2. 6

    Seulement de supprimer les de 100% de la largeur de votre pied de page et ajouter à droite:0; à la place.

    Que la règle combinée avec la gauche:0 veillera à ce que l'élément s'étend sur toute la largeur et toute rembourrage et les frontières à ne pas provoquer un défilement.

    (Le box-sizing règle doit avoir travaillé aussi en supposant que vous avez eu le fournisseur de préfixes pour les anciens navigateurs et ne supportons pas moins de IE8)

    • Merci j'ai essayé mais toujours une barre de défilement, j'ai fait du violon jsfiddle.net/9gh3ht48/2
    • La question n'a rien à voir avec le pied de page de plus et c'est parce que vous avez imbriqué un bootstrap .ligne sans qu'il soit à l'intérieur d'un .élément conteneur. L' .ligne a des marges négatives de 15px sur chaque côté qui sont à l'origine de la barre de défilement. Vous devriez avoir un .conteneur wrapper qui a 15px de droite et de gauche rembourrage pour absorber les marges négatives de .ligne sans provoquer une barre de défilement. Utilisez la bonne structure et de la barre vont disparaître.
    • Je tiens également à souligner que la question n'a jamais été le pied de page de toute façon parce que le pied de page et .le pied de page sont les différents éléments, et le rembourrage a été sur l'intérieure d'un élément afin de ne pas affecter la largeur du pied de page.
    InformationsquelleAutor Paul O'B
  3. 3

    Voir ce violon

    Supprimer padding-left:5% de

    .footer {
padding-left:5% 
}

    Lorsque vous ajoutez 15% de remplissage à gauche, le reste de la largeur disponible est de 85%.Mais vous êtes réglage de la largeur à 100%, ce qui provoque une barre de défilement Horizontale pour votre page..

    Donc, si vous voulez que 15% de rembourrage définir la largeur de votre 85% seulement..

    InformationsquelleAutor Lal
  4. 0

    J'ai ajouté:

    display: inline;

    pour .le pied de page, et il a résolu le problème, bien que vous aurez besoin de changer le rembourrage.

    InformationsquelleAutor Optox
  5. 0

    Ajouter une largeur de 100% pour la classe de pied de page: .le pied de page. Cela permettra de résoudre votre problème.

     .footer {
padding-left: 5%;
box-sizing: border-box;
width: 100%;
}
    InformationsquelleAutor Concrete-Cowboy