Горизонтальная полоса прокрутки за точкой минимальной ширины

Question

HTML:

<div id="mcolWrapper">
    <div id="mcol">
      <div class="wrapper">
      content
      </div>
    </div>
</div>

<div id="lcol">
    <div class="wrapper">
    content
    </div>
</div>

<div id="rcol">
    <div class="wrapper">
    content
    </div>
</div>

CSS:

#mcolWrapper {
    float: left;
    width: 100%; }

#mcol { margin: 0 295px 0 235px; min-width: 500px; }

#lcol {
    float: left;
    width: 235px;
    margin-left: -100%; }

#rcol {
    float: left;
    width: 290px;
    margin-left: -295px;

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

Answer 1

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

http://methvin.com/splitter/

Answer 2

min-width не является полностью поддерживаемым свойством css. Простой способ обойти это в вашей ситуации - просто добавить div в нижней части столбца, ширина которого равна минимальному значению ширины.

<div id="mcol">
  ...
  <div style="width:500px;"></div>
</div>

Это приведет к тому, что столбец не сможет сжиматься меньше. Надеюсь, это поможет!