Как поставить правую панель навигации без скрытия полосы прокрутки? - PullRequest
Новая
       1

Как поставить правую панель навигации без скрытия полосы прокрутки?

0 голосов
/ 09 июля 2010

Рассмотрим следующую страницу: http://www5.atpages.jp/~syockit/testFixed.html

Я создаю страницу с верхним и нижним колонтитулами, а также средним контейнером с левой и правой панелями навигации и областью содержимого в середине.Дело в том, что я хочу, чтобы полоса прокрутки для контента находилась справа от окна, а не справа от области контента (чтобы она могла следовать закону Фитта в максимизированном режиме).В текущем стиле правая панель навигации закрывает полосу прокрутки, делая ее невидимой.

Я заметил, что панель навигации переместится влево, если вместо нее включена полоса прокрутки для всей страницы (т.е. для <body>),Таким образом, одним из решений будет использование <iframe> для контента.Но есть ли способ заставить правую панель навигации переместиться влево, чтобы разместить полосу прокрутки, когда это необходимо, без обращения к iframe?

См. Www5.atpages.jp/~syockit/testIframe.html, например, с использованием iframe.

Ответы [ 2 ]

0 голосов
/ 09 марта 2011

Yay, после экспериментов, я наконец нашел ответ!Протестировано для работы на Chrome 11, Firefox 4, Opera 11.

CSS: 

.middle { position: absolute; left: 120px; overflow: auto; }
.content { padding-right: 150px; }
.middle, .right-sidebar { top: 100px; bottom: 50px; }
.right-outer { float: right; }
.right-sidebar { position: fixed;}
.right-outer, .right-sidebar {  width: 150px; }

HTML: 

<div class='middle'>
  <div class='right-outer'>
    <div class='right-sidebar'>
      Sidebar content goes here.
    </div>
  </div>
  <div class='content'>
  Content goes here.
  </div>
</div>

Вы можете увидеть рабочую демонстрацию здесь: http://jsfiddle.net/b4kPm/2/

РЕДАКТИРОВАТЬ: Ой, это не работает в Opera 11!Интересно, что пошло не так ...

РЕДАКТИРОВАТЬ 2: Абсолютное позиционирование Opera не будет учитывать полосы прокрутки.Пришлось использовать float: right.

РЕДАКТИРОВАТЬ 3: Как я и думал ... Он не будет автоматически перенастраиваться, когда содержимое динамически изменяется, чтобы не иметь переполнения содержимого.Это будет работать только при загрузке страницы или повторном рендеринге контента.

0 голосов
/ 09 июля 2010

Ваш контент div # расширяется вправо, вы должны изменить: это 

#content {
   padding-right: 150px
}

на это 

#content {
  margin-right: 150px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...