Вертикальная прокрутка при выходе элемента за пределы окна с правой стороны

Arantir · January 7, 2012

Проблема заключается в том, что когда слой (div) выходит за предел окна с правой стороны, то возникает вертикальная прокрутка. При этом такого не случается, если слой вылазит за пределы слева.

А его выхода за пределы окна требует дизайн страницы. А точнее на случай разной ширины экрана. Пример:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  <style>
    html, body {
    width: auto;
    height: 100%;
    }
  body {
    margin: 0px;
    }
  div {
    border: 1px dotted black;
    }
  #spacer-1 {
    background: red;
    opacity: 0.7;
    margin: 0 auto;
    width: 100%;
    min-width: 1024px;
    max-width: 1280px;
    height: 1600px;
    }
  #spacer-2 {
    background: blue;
    opacity: 0.7;
    position: absolute;
    top: 50px;
    margin: 0 auto;
    width: 100%;
    min-width: 1024px;
    max-width: 1280px;
    height: 1500px;
    }
  #spacer-3 {
    background: green;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: -380px;
    right: -380px;
    width: auto;
    height: 100%;
    }
    </style>
  </head>
  <body>
    <div id="spacer-1">spacer-1
    <div id="spacer-2">spacer-2
    <div id="spacer-3">spacer-3</div>
      <div id="content"></div>
    </div>
    </div>
  </body>
</html>

Чтобы лучше понять, можете скопировать в файл и открыть в браузере. Я там немного раскрасил, чтобы виднее было.

Короче не буду долго и нудно разъяснять, почему все именно так. В кратце скажу, что spacer-3 должен вылазить справа и слева, чтобы при увелечии размера окна в ширину было видно картнки, которые являются его фоном, и в это же время эти картинки немного заходили поверх spacer-2.

Как видно из примера, почему-то возникает полоса прокрутки и возможность прокрутить вправо, а этого быть не должно.

Как бы убрать прокрутку, но чтобы элемент мог выйти за предел окна справа?

Не является решением поставить "overflow-x: hidden" для body, потому, что прокрутки не будет вовсе, а она должна быть при уменьшении размера окна меньше min-width в spacer-2.

Edited January 7, 2012 by Arantir

Arantir · January 7, 2012

Хм... Проблема решилась... Поставил обрезку overflow-x: hidden, но чтобы прокрутка оставалась, то поставил распорку в виде min-width такой же, как min-width spacer-2, оба параметра на body. Теперь при ширине больше min-width справа все обрезается по границе окна и прокрутки нет, а при ширине меньше min-width body больше не сужается и появляется прокрутка.

Вот если бы на форум не написал, наверное не догадался бы. Целых 2 дня экспериментировал с этим и не получалось =)

Edited January 7, 2012 by Arantir

Arantir · January 7, 2012

Черт! Ничего не вышло. Как будто мне просто показалось... Не работает, в общем, вышеописанное решение. Несмотря на то, что body вылазит за пределы окна, полос прокрутки нет по прежнему.

Sign In

Вертикальная прокрутка при выходе элемента за пределы окна с правой стороны

Question

Arantir

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Arantir

Link to comment

Share on other sites

Arantir

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information