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

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

0 голосов
/ 01 августа 2009

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

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

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

Ответы [ 2 ]

2 голосов
/ 01 августа 2009

Вы можете сделать левый столбец 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.

0 голосов
/ 01 августа 2009

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

...