Вертикальная полоса прокрутки для столбца неизвестной высоты

Я создаю веб-сайт с макетом, аналогичным Картам Google: заголовок, боковая панель слева и карта справа.

На веб-сайте Google Maps, когда содержимое боковой панели превышает высоту экрана, рядом с ней появляется вертикальная полоса прокрутки (например, если вы набираете «ресторан» в поле поиска). Я пытаюсь добиться аналогичного эффекта и пробовал разные варианты, но ничего не получается. Установка высоты боковой панели на auto или 100% не работает, так как боковая панель не начинается в верхней части страницы — вертикальная полоса прокрутки либо слишком короткая, либо не достигает нижней части страницы (в случае высоты auto) или слишком длинный и превышает высоту страницы (в случае 100% высоты). Я думаю, что Google использует JS для расчета высоты боковой панели.

Любые идеи о том, как я могу заставить это работать?


html css scrollbar height
person Community    schedule 01.08.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете сделать левый столбец div с помощью css, который содержит это:

overflow: scroll

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

Изменить: пример.

<html>
  <head>
    <style type="text/css">
      #example{
        overflow: scroll;
        height: 200px;
        width: 100px;
        border: 1px solid red;
        color: #FFF;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="example">Hello, World!</div>
  </body>
</html>

Теперь, если вы замените «Hello, World!» с:

Line One<br />
Line Two<br />
Line Three<br />
Line Four<br />
Line Five<br />
Line Six<br />
Line Seven<br />
Line Eight<br />
Line Nine<br />
Line Ten<br />

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

person Mike Trpcic    schedule 01.08.2009
comment
Если это ответ, я тебя ненавижу. Я придумал это час назад и поклялся, что это должно быть сложнее, чем это. - person Tyler Carter; 01.08.2009
comment
в моем случае проблема в том, что высота столбца неизвестна. - person ; 01.08.2009
comment
yulka: Просто установите высоту div на 100%. Затем он займет 100% доступного места, и после этого будет происходить прокрутка. - person Mike Trpcic; 01.08.2009

arrow_upward
0
arrow_downward

В итоге я использовал плагин jquery ui.layout, он отлично работает для меня: http://layout.jquery-dev.net/index.html

person Community    schedule 01.08.2009