HTML - создание горизонтальной полосы прокрутки после достижения определенной ширины - PullRequest
Новая
       8

HTML - создание горизонтальной полосы прокрутки после достижения определенной ширины

4 голосов
/ 29 января 2012

У меня горизонтальная панель навигации шириной 100%.Как только навигация достигнет определенной минимальной ширины - около 800 пикселей, я говорю, - я бы хотел, чтобы появилась горизонтальная полоса прокрутки.Свойство min-width CSS не работает, потому что оно не создает полосу прокрутки.

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

Как я могу добавить горизонтальные полосы прокрутки после фиксированной минимальной ширины?Пожалуйста, помогите мне.

Спасибо.

РЕДАКТИРОВАТЬ По запросу, вот мой код:

HTML 

<nav id="topBar">
    <section id="topBarRight">
        <!-- stuff !-->
    </section>
</nav>

CSS (без каких-либо ваших предложений) 

#topBar
{
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 50px;
    min-width: 800px;
}

#topBarRight
{
    float: right;
}

Ответы [ 3 ]

3 голосов
/ 29 января 2012

В сущности, вам нужен какой-то родительский элемент для содержания навигации, действующий как своего рода «область просмотра»: 

<nav id="topBar">
  <section id="topBarRight">
    <ul id="navMenu">
      <li>Home</li>
      <li>About</li>
      <!-- ... -->
    </ul>
  </section>
</nav>

Затем вы можете ограничить ширину родительского элемента и позволить расширению навигации по мере необходимости: 

<style>
  #topBar {
    /* ... */
    width: 100%;
    overflow: auto;
  }

  #topBarRight {
    min-width: 800px;
    overflow-x: auto;
  }

  #navMenu {
    float: right;
    /* ... */
  }
</style>
1 голос
/ 29 января 2012

Это делает поле со статической шириной для содержания вашего контента.Когда недостаточно места для ячейки (окно <400px), появляется полоса прокрутки. <br>http://jsfiddle.net/Re4AP/5/

По умолчанию это окно шириной 100% с минимальной шириной 400px.содержать ваш контент.Когда недостаточно места для содержимого в поле, оно разбивает содержимое (в данном случае текст) на несколько строк.Если окно меньше 400 пикселей (минимальная ширина), появляется полоса прокрутки.
http://jsfiddle.net/Re4AP/7/

1 голос
/ 29 января 2012

Я бы поместил div с min-width в качестве родителя для всего содержимого панели навигации в панель навигации.Сама панель навигации должна иметь переполнение-x: авто и переполнение-у: скрыто или переполнение: авто.Для полосы прокрутки потребуется дополнительное вертикальное пространство, поэтому может потребоваться и вертикальная полоса прокрутки.

...