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解决方案。

编辑：这是一个证明问题的方法：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列正在折叠（即使是全屏尺寸），因为左列（min-width）的#sidebar值超过其width } value，因此 right 列（#content）的剩余空间小于80%宽度的#container。

在这种情况下，#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;
}

<强> WORKING DEMO

两列布局 - 一列最小宽度

2 个答案: