Абсолютно позиционированный div справа, вызывающий полосу прокрутки, когда левый не

Я пытаюсь "фланкировать" центрированный div с некоторыми элементами дизайна, которые абсолютно расположены вне основной ширины div. Я получаю полосу прокрутки из-за элемента справа, но не элемент слева (IE6/7/8, Chrome, Firefox). Как я могу избавиться от этой горизонтальной полосы прокрутки?

<html>
<head>
<style type="text/css">
    html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
    }

    body { text-align: center; }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;
        z-index: 0;
    }

    .main {
        background: #900;
        height: 700px;
    }

    .right, .left {
        position: absolute;
        height: 100px;
        width: 100px;
    }

    .right { 
        background: #090;
        top: 0px;
        left: 960px;
        z-index: 1;
    }

    .left {
        background: #009;
        top: 0px;
        left: -100px;
        z-index: 1;
    }           
</style>
</head>
<body>
    <div class="wrapper">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

Ответы

Ответ 1

Это работает в IE6-9, FF3.6, Safari 5 и Chrome 5. Кажется неважным, какой тип документа я бросил на него (none, xhtml 1 transitional, html5). Надеюсь, это поможет, это была интересная проблема.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body { 
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    overflow: auto;
}
#container {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
    margin: 0 auto;
}

#main {
    background: #cea;
    width: 960px;
    margin: 0 auto;
    height: 700px;
    position: relative;
    top: 0;
}

#right,
#left {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
}

#right { 
    background: #797;
    right: -100px;
}

#left {
    background: #590;
    left: -100px;
}      
</style>
</head>
<body>
    <div id="container">
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </div>
</body>
</html>

Ответ 2

Бросок переполнения-x: скрытый на теге body будет работать во всем, что не IE6/7... но для этих двух браузеров вам также необходимо добавить overflow-x: hidden в тег html.

Итак, используйте то, что у вас есть с этой настройкой:

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

Обратите внимание, что причина, по которой "*" взлом используется в объявлении html, является тем, что IE8 является нетрадиционным. Если вы не используете его, IE8 также потеряет вертикальные полосы прокрутки, а не только горизонтальные. Я не знаю почему. Но это решение должно быть прекрасным.

Ответ 3

У меня была аналогичная проблема, и я полностью отрывал свои волосы, когда нашел, что решение выше не работает для меня. Я преодолеваю это, создавая div вне моего основного контейнера div и используя min-width и max-width, чтобы придумать решение.

#boxescontainer {
    position: relative;
    max-width: 1100px;
    min-width: 980px;
}   

    #boxes {    
        max-width: 1100px;
        min-width: 900px;
        height: 142px;
        background:url(../grfx/square.png) no-repeat;
        background-position: center;
        z-index: 100;
    }

Я обнаружил, однако, что мне также нужно было сделать square.png изображение размером div, поэтому я сделал его прозрачным png на 1100px. Это было мое решение проблемы и, надеюсь, это могло помочь кому-то еще.

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

Что касается людей, использующих overflow-x: hidden, я должен был бы не согласиться с этим методом в основном потому, что вы полностью исключаете способность пользователей к горизонтальной прокрутке. Если ваш сайт предназначен для просмотра разрешения 1024 пикселя, тогда люди, которые имеют разрешение 800 пикселей, не смогут увидеть половину вашего сайта, если вы уберете возможность горизонтальной прокрутки.

Ответ 4

Ваше тело не установлено относительно.

Ответ 5

Не зная, что вы хотели бы сделать с этим, я, возможно, установил фоновое изображение на теле.

Ответ 6

Вы получаете полосу прокрутки только в том случае, если область просмотра тоньше, чем основной плюс, что правильно, не так ли? (Не думаю, что это было ясно для некоторых людей.) Это ожидаемое поведение браузера для переполнения содержимого.

В зависимости от того, что вы хотите сделать (почему вы хотите, чтобы он исчез в этом случае, если вы это сделаете?), вы можете установить переполнение: hidden на .wrapper. Это всегда скроет его - если вы хотите динамически отображать его на каком-то другом событии, это сработает.

Если я не ошибаюсь, вы просто не хотите, чтобы он показывал, когда их видовой экран шириной всего 960 пикселей. AFAIR вы не можете сделать это без js/jQuery. Мое предложение действительно было бы - особенно если вы не хотите связываться с javascript - если вы хотите, чтобы это содержимое было видимым вообще, примите полосу прокрутки на узкой ширине. Это может раздражать вас как дизайнера, но большинство людей этого не заметят, а те, кто это делает, могут получить доступ к вашему контенту - это победа, верно?

Ответ 7

У меня есть решение, которое не работает в IE7/IE6, но, кажется, все в порядке.

Создайте обертку (#bodyInner) вокруг всего, что находится внутри вашего < body > тег.

Примените это правило CSS:

#bodyInner {
    width:100%;
    overflow:hidden;
    min-width:960px;
    }

Слишком плохо, вы не можете просто применить это на < body > элемент.

Ответ 8

Оберните все элементы в div, сделайте это относительное положение div и переполнение скрытым. Он решает эту проблему каждый раз.: D

Ответ 9

Если язык страницы слева направо, то левые элементы без подгонки не вызывают полосу прокрутки.

Попробуйте следующее:

<html dir="rtl">...</html>

Это изменит направление текста на страницу справа налево, и теперь левый div вызовет полосу прокрутки, а не правую.

Вы можете сделать то же самое с направлением: свойство rtl css.

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

Ответ 10

Старый вопрос, который я знаю, но может помочь кому-то другому. Нижеследующее расширяет ответ Джеймса, но работает в IE6/7/8/9, FF и Webkit. Да, он использует злые выражения, но вы можете поместить их в специальную таблицу стилей IE6.

#bodyInner {
       width: 100%;
       min-width: 960px;
       overflow: hidden;       
       width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}

Ответ 11

Мне тоже понадобилось такое решение - спасибо всем, кто предложил 100% -ную обертку с overlow-x скрытым. Однако я не думаю, что вам нужно добавить дополнительный #bodyInner div - я успешно протестировал его, применяя атрибуты width и overflow непосредственно к телу в Safari, Opera, Firefox, Chrome и IE8.