wake-up-neo.net

Meine HTML-Seite scrollt nicht in Browsern

Die Seite auf meiner Website scrollt nicht. Wenn mehr Inhalte vorhanden sind, als auf dem Bildschirm angezeigt werden können, können Sie ihn nicht wirklich sehen, da der Bildlauf nicht funktioniert. Ich bin kein CSS-Guru und ich weiß nicht, ob das Problem tatsächlich mit CSS oder HTML zusammenhängt. 

Ich habe einige Zeit damit verbracht, das Problem zu verstehen, aber ich bin kein CSS-Guru und hoffe, dass mir jemand helfen kann. Die Seite verwendet Tweeter-Bootstrap und ein benutzerdefiniertes Design (das ich nicht geschrieben habe). Wenn ich kein CSS-Motiv einfüge, funktioniert das Scrollen einwandfrei. 

Teil meiner Theme-CSS-Datei:

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

entfernen Sie overflow: hidden; aus body in der Datei bootstrap-theme.css.

35
Nabbit

Für jemanden, der sich in meinem Szenario befand, könnte dies aufgrund von height: 100% für html, body in angle-material.css geschehen. Entferne es und du kannst loslegen.

1
JohnVanDijk

Das mag für niemanden relevant sein, aber ich werde es hier sowieso kommentieren - ich benutzte ein

pseudo :after 

element am Körper und hatte angewendet 

position: fixed

unterhalb eines bestimmten Standpunktes zur css hatte ich allerdings gestellt

.classname

und nicht 

.classname:after

auf dem Element. Ich werde das CSS hier posten. Dies hat die Position der Seite so fixiert, dass sie nicht scrollen konnte.

vollständiges CSS, das relevant ist:

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

/ * Anfangs habe ich body.bg nicht body.bg:after gestellt, was die Dinge nicht zum Rollen brachte und ich wurde am Ende verwirrt wie die Hölle * /

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}
0
Alex139602