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

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 splitter.Это то, что я использую, когда мне нужен макет столбца, потому что он лучше абстрагируется от различий браузера, чем шаблоны CSS, и безупречно обрабатывает полосы прокрутки.

http://methvin.com/splitter/

Answer 2

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

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

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