Горизонтальная полоса прокрутки выше точки минимальной ширины
-
19-09-2019 - |
Вопрос
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;
Я хочу установить минимальную ширину центрального столбца, чтобы он не мог уменьшаться слишком сильно, и после этой минимальной точки ширины я бы хотел, чтобы браузер отображал горизонтальную полосу прокрутки вместо правого столбца, перекрывающего центральный столбец.
Решение
Вы могли бы попробовать плагин jQuery splitter.Это то, что я использую, когда мне нужен макет столбца, потому что он лучше абстрагируется от различий браузера, чем шаблоны CSS, и безупречно обрабатывает полосы прокрутки.
Другие советы
min-width не является полностью поддерживаемым свойством css.Простым способом обойти это в вашей ситуации было бы просто добавить div в нижней части столбца, ширина которого равна вашему минимальному значению width.
<div id="mcol">
...
<div style="width:500px;"></div>
</div>
Это приведет к тому, что столбец не сможет уменьшиться еще больше.Надеюсь, это поможет!