两列布局-一列最小宽度

Question

是否有可能有一个两列布局，其中一列有一个最小宽度值?请参阅下面的代码:

#container {
   width: 100%;
   max-width: 1200px;
   min-width: 960px;
   height: 600px;
   margin: 0 auto;
}
#sidebar {
   float: left;
   width: 20%;
   min-width: 300px;
   height: 100%;
}
#content {
   float: left;
   width: 80%;
   height: 100%;
}

问题是，当窗口被调整大小，#sidebar得到最小宽度值应用，#content将从页面下降。

理想情况下，我希望这样做，而不必使用display: table，理想情况下，只有CSS的解决方案是首选。

编辑:这里有一个jsfiddle来演示这个问题:http://jsfiddle.net/2DwB3/

Answer 1

您可以这样做:http://codepen.io/anon/pen/GmwIo

  #container {
     width: 960px;
     height: 600px;
     margin: 0 auto;
     overflow: hidden;
  }
  #sidebar {
     float: left;
     min-width: 300px;
     height: 100%;
  }
  #content {
  }

Answer 2

#content列正在崩溃(即使在全屏尺寸下)，因为左列(#sidebar)的min-width值超过其width值，因此右列(#content)的剩余空间小于#container宽度的80%。

在这种情况下，#content的宽度应该以#sidebar的宽度为基础进行更改。但是你已经使用了min-width属性的侧边栏，如果你设置一个小于宽度值的值(像150px)，这将是不可能计算#content的宽度，即使使用CSS3 calc()函数。

或者，您可以停止浮动右列，并通过overflow-x: hidden;隐藏额外的水平溢出，以实现期望的目标:

#sidebar {
  float: left;
  width: 20%;
  min-width: 300px;
  height: 80%; /* Changed for the demo */
}
#content {
  height: 100%;
  overflow-x: hidden;
}

演示工作

。