web-dev-qa-db-fra.com

Ma page html ne défile pas dans les navigateurs

La page de mon site Web ne défile pas. S'il y a plus de contenu que l'écran ne peut en contenir, vous ne pouvez pas le voir car le défilement ne fonctionne pas. Je ne suis pas un gourou des CSS et je ne sais pas si le problème vient du CSS ou du HTML. 

J'ai passé du temps à essayer de comprendre le problème, mais je ne suis pas un gourou des CSS, alors j'espère que quelqu'un pourra m'aider. La page utilise Tweeter-bootstrap et un thème personnalisé (que je n’ai pas écrit). Lorsque je n'inclus pas le thème CSS, le défilement des fichiers CSS fonctionne correctement. 

Une partie de mon fichier CSS de thème:

body {
    color: #000;
    font-family: 'Play', sans-serif;
    font-size: 16px;
    line-height: 25px;
    background: #e0dbcd url('../images/bg.jpg');
    letter-spacing:0.2px;
    overflow: hidden;
}
htmlcsshtml5twitter-bootstraptwitter-bootstrap-3
9
Pol

supprimez overflow: hidden; de body dans le fichier bootstrap-theme.css.

35
Nabbit

Pour quelqu'un qui était dans mon scénario, cela pourrait se produire en raison de height: 100% pour html, body dans angular-material.css. Supprimez-le et vous êtes prêt à partir.

1
JohnVanDijk

Cela n’est peut-être pertinent pour personne, mais je vais le commenter ici de toute façon - j’utilisais un

pseudo :after 

élément sur le corps, et avait appliqué 

position: fixed

en dessous d’un certain point de vue sur le css, mais j’avais mis

.classname

et pas 

.classname:after

sur l'élément. Je posterai le CSS ci-dessous. ce que cela faisait était de fixer la position de la page afin qu'elle ne puisse pas défiler.

cSS complet qui est pertinent:

body {
  background-color: #5c2028;
  color: #ffffff;
  min-width: 100%;
  min-height: 100%;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

body.bg{
  background-image: url('../img/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-clip: none;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

    body.bg:after{
    content : "";
    background-image: url('../img/hildasball_7_d_s_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-clip: none;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity : 1.0;
    z-index: -2;

    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    /*width: auto;
    height: auto;*/
}


@media (max-width: 767px) {
  body{
    min-height: 800px;
  }

/ * Au départ, je mettais body.bg pas body.bg:after, ce qui faisait que les choses ne défilaient pas et je finissais par être confus comme l'enfer * /

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}
0
Alex139602