Абсолютно расположен div справа, вызывая полосу прокрутки, когда левый не - PullRequest
Новая
       50

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

14 голосов
/ 18 февраля 2010

Я пытаюсь "обвести" центрированный 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>

Ответы [ 11 ]

15 голосов
/ 18 июля 2010

Это работает в IE6-9, FF3.6, Safari 5 и Chrome 5. Похоже, что не имеет значения, какой тип документа я выбрасывал (нет, xhtml 1 переходный, 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>
4 голосов
/ 16 апреля 2010

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

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

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

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

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

1 голос
/ 17 марта 2011

У меня была проблема, похожая на эту, и я полностью рвал на себе волосы, когда обнаружил, что решение, описанное выше, не совсем подходит для меня.Я преодолеваю это, создавая 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;
    }

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

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

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

0 голосов
/ 10 ноября 2010

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

0 голосов
/ 26 октября 2010

Старый вопрос, я знаю, но может помочь кому-то еще. Ниже подробно описан ответ Джеймса, но он работает в 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%"));
}
0 голосов
/ 20 июля 2010

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

Попробуйте это: 

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

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

Вы можете сделать то же самое с direction: свойство rtl css.

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

0 голосов
/ 24 июня 2010

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

0 голосов
/ 16 апреля 2010

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

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

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

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

Жаль, что вы не можете просто применить это к элементу <<code>body>.

0 голосов
/ 01 марта 2010

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

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

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

0 голосов
/ 01 марта 2010

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

Страница:
...