CSS, позиция: абсолютная, полосы прокрутки - PullRequest
Новая
       2

CSS, позиция: абсолютная, полосы прокрутки

3 голосов
/ 21 марта 2011

Скажем, есть страница: 

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Почему горизонтальная полоса прокрутки учитывает только переполнение RIGHT?

Другими словами, почему LEFT не вызывает полосу прокрутки, а RIGHT -?

Есть ли способ, кроме body -> overflow: hidden, чтобы ПРАВО не вызывать полосу прокрутки?

Редактировать :

Чего я пытаюсь добиться, так этоОболочка в середине страницы (как и любая другая панель «контента») - в основном div -> margins: 0 auto;. Это должно вызвать горизонтальную полосу прокрутки, если экран слишком маленький. Тогда, и это проблема, я хочу, чтобы другой div «вставил»снаружи "обертки - они не должны вызывать полосу прокрутки.

Изменить 2 : 

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Когда экран достаточно широкий, все хорошо. Но как япопробуйте уменьшить экран, внезапно появляется горизонтальная полоса прокрутки. Проблема в том, что она позволяет только прокручивать, чтобы видеть ВПРАВО, а не ВЛЕВО. Является ли способ, чтобы полоса прокрутки не появлялась до оболочки, а только для оболочки, больше, чем осыпьп

Ответы [ 2 ]

4 голосов
/ 21 марта 2011

После вашего разъяснения я понимаю проблему.

Вы можете обойти это, добавив элемент-обертку и задав ему overflow: hidden и min-width.

Демонстрационная версия

HTML: 

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

CSS: 

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}
1 голос
/ 22 декабря 2011

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

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

Разметка: 

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

CSS 

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}
...