Позиция: абсолютные причины горизонтальной полосы прокрутки

Абсолютно позиционированные (боковые желтые рекламные объявления) div вызывают нежелательную горизонтальную полосу прокрутки при изменении размера окна (размер уменьшается). Полоса прокрутки должна появляться только тогда, когда окно меньше основного #container, и этот рекламный div не должен влиять на макет. Это не имеет значения, если они покрываются.

HTML:

<div id='topbar'>
    <div id='menu'> <a href='#'>Link1</a>
 <a href='#'>Link2</a>
 <a href='#'>Link3</a>
 <a href='#'>Link4</a>

    </div>
</div>
<div id='container'>
    <div id='pushfix'></div>
    <div id='ad_container'>
        <div id='ad1'>ad</div>
        <div id='ad2'>ad</div>
    </div>
Lorem ipsum placeholder text
</div>

CSS

body, html {
    height:100%;
}
body {
    margin:0;
}
#topbar {
    width:100%;
    background-color:#DCDCDC;
    height:40px;
    position:absolute;
}
#menu {
    width:250px;
    background-color:#B3B3B3;
    margin:0 auto;
    height:100%;
    text-align:center;
    line-height:40px;
}
#menu a {
    color:#fff;
}
#container {
    height:100%;
    background-color:#808080;
    width:240px;
    padding:0 5px;
    margin:0 auto;
}
#pushfix {
    height:40px;
}
#ad_container {
    position:relative;
    width:240px;
}
#ad_container div {
    width:100px;
    background-color:yellow;
    height:300px;
    position:absolute;
}
#ad1 {
    left:-105px;
}
#ad2 {
    right:-105px;
}

Точная макетная реплика: http://jsfiddle.net/8UkQA/

Ответ 1

Абсолютно позиционированные элементы, которые выходят за границы body, по-видимому, вызывают появление полос прокрутки по какой-либо причине. Вы можете исправить это, просто обернув все внутри тега тела в относительно позиционированном div в стиле overflow: hidden;. Абсолютно позиционированное содержимое, которое выходит за пределы этого контейнера, не будет вызывать полосы прокрутки в окне.

Вот рабочий пример: http://jsfiddle.net/8UkQA/1/

Ответ 2

Я, возможно, захочу добавить, если эта проблема возникнет, и с помощью решения, предложенного @Aaron, страница, похоже, не прокручивается, тогда вы можете использовать ориентированную по оси версию атрибута "overflow", как показано ниже,

overflow-x: hidden;

Это только скроет содержимое, выступающее с правой стороны (или с левой стороны, если сайт RTL), а не вертикальный контент.

Также для дальнейшего улучшения этого метода, если выступающий контент появляется только с определенным разрешением (как в моем случае), вы можете использовать запрос css media для ограничения поведения.

@media (min-width: 1500px) {
    body {
        overflow-x: hidden;
    }
}

Ответ 3

У меня была аналогичная проблема, когда я хотел, чтобы часть моего div была вырезана, покупая правую границу экрана. Поскольку доступны единицы css 'vw', я решил проблему следующим образом:

html {
    // ... some code here
    overflow-x: hidden;
    width: 100vw;
}

Это хорошо ведет себя и для чувствительных сайтов.

Ответ 4

Вам нужно указать дочерние координаты a.k.a. top: 0; left: 0;