Моя страница html не прокручивается в браузерах

Страница на моем сайте не прокручивается. Если есть больше контента, чем экран может поместиться, вы не сможете его увидеть, потому что свиток не работает. Я не являюсь и гуру CSS, и я не знаю, действительно ли проблема с CSS или HTML.

Я потратил некоторое время, пытаясь понять проблему, но я не гуру CSS, поэтому я надеюсь, что кто-то может мне помочь. На этой странице используется твитер-бутстрап и настраиваемая тема (которые я не писал). Когда я не включаю тему CSS, прокрутка файлов работает нормально.

Часть моей темы Файл CSS:

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

Ответ 1

удалите overflow: hidden; из body в файле bootstrap-theme.css.

Ответ 2

Для тех, кто был в моем сценарии, это может происходить из-за height: 100% для html, body в angular -material.css. Удалите его, и вы хорошо пойдете.

Ответ 3

Это может быть неприемлемо для всех, но я все равно буду комментировать его. Я использовал

pseudo :after

на теле и применил

position: fixed

ниже определенной точки зрения на css, однако я положил

.classname

а не

.classname:after

на элементе. Я опубликую CSS ниже. что это заставило зафиксировать позицию страницы, чтобы она не прокручивалась.

полный CSS, который имеет значение:

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

/* Изначально я помещаю body.bg не body.bg:after, из-за чего вещи не прокручиваются, и я в конечном итоге запутался как ад */

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}

Ответ 4

Я согласен, что все сказанное выше добавит, что я недавно обнаружил в своем коде следующий CSS-код.

* {
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

Это также может помешать работе HTML & прокрутка тела. Поэтому я бы порекомендовал добавить этот эффект перехода в конкретный компонент, который вы хотите получить, а не в HTML & тело.