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

Question

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

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

14

html css css-position

задан Michael Snyder 17 February 2010 в 21:34

8 ответов

Другие вопросы по тегам:

html css css-position

Похожие вопросы:

score 0 · Answer 1

Пытались ли вы использовать Расширения AR для массового импорта? Вы получаете впечатляющие улучшения производительности при вставке 1000-х строк в БД. Для получения дополнительной информации посетите веб-сайт .

Обратитесь к этим примерам для получения дополнительной информации

Пример использования 1

Пример использования 2

Пример использования 3

-121--4667573-

Это просто означает, что у вас меньше VCS для управления в вашей цепочке разработки (svn).
С точки зрения администрирования:

вы оставлены с распределенными репозиториями, управляемыми Git, каждый автономный с их полной историей
вы не должны поддерживать соединение с центральным SVN репо.
Вы можете организовать резервное копирование по-разному (проталкивая данные в удаленное репо резервного копирования или экспортируя репо Git через пакет git )

И, конечно, вы можете управлять всеми преимуществами Git по сравнению с SVN .

-121--3977858-

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

score 0 · Answer 2

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

0

ответ дан 1 December 2019 в 13:08

score 0 · Answer 3

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

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

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

score 0 · Answer 4

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

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

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

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

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

score 4 · Answer 5

Добавление тега overflow-x: hidden в тег 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 также потеряет вертикальные полосы прокрутки, а не только горизонтальные. Не знаю почему. Но это решение должно подойти.

score 0 · Answer 6

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

score 15 · Answer 7

Это работает в 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>

score 0 · Answer 8

Если язык страницы слева направо, то левые неподходящие элементы не вызвать полосу прокрутки.

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

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

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

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

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