Horizontal scrollbar past the min-width point

余生颓废 提交于 2019-12-24 11:23:01

问题


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;

I want to set a minimum width on the center column so it cannot shrink too much and past this minimum width point, I'd like the browser to display a horizontal scroll bar instead of the right column overlapping the center column.


回答1:


You could try the jQuery splitter plugin. It's what I use when I need a column layout, because it does a better job of abstracting away the browser differences than CSS templates do, and it handles the scrollbars flawlessly.

http://methvin.com/splitter/




回答2:


min-width is not a fully supported css property. An easy way around this in your situation would be to simply add a div at the bottom of the column that has a width equal to your minimum width value.

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

This will cause the column to not be able to shrink any smaller. Hope that helps!



来源:https://stackoverflow.com/questions/1720017/horizontal-scrollbar-past-the-min-width-point

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!