调整大小时 DIV 不会缩小

Question

所以我有一个网站，上面有两个简单的DIV窗格：左边是一个内容区，右边是一个固定的300px菜单，它们的最大尺寸都是1200px。我希望用户能够调整窗口大小，并缩小左窗格，右侧菜单保持固定。但是现在我找不到任何方法来做到这一点，在最大尺寸下一切看起来都不错，但是如果我调整窗口大小，左窗格不会缩小，而是右菜单只是换行到屏幕底部。使用左侧菜单很容易，但菜单在右侧。这是我到目前为止所拥有的：

#main
{
 max-width: 1200px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0;
 display: block;
 padding: 0;
}
#left
{
 max-width: 890px;
 float: left;
 padding-right: 10px;
}
#right
{
 width: 290px;
 top: 0;
 float: right;
 padding-right: 10px;
 padding-left: 10px;
}

Answer 1

您可以使用 CSS calc()来调整左侧容器的宽度。

选项 1 小提琴

.HTML

<div id="main">
  <div id="left"></div>
  <div id="right"></div> 
</div>

.CSS

#main{
  width: 100%; //set to 100% since you're capping it at 1200 anyways
  max-width: 1200px;
  /* margin-right: auto;
  margin-left: auto;
  margin-top: 0; */ condense these to the following:
  margin: 0 auto;
  /*display: block;*/ already a block element so not necessary 
  padding: 0;
  overflow: hidden; //add to correct floating elements
}
#left{
  background: red; //just for my test
  height: 100px; //just for my test
  width: calc(100% - 300px); //readjusts based on screen size
  float: left;
  padding-right: 10px;
  -moz-box-sizing: border-box;  //if you use padding add these lines to fix issue of padding adding to width 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 #right{
   background: black; //just for my test
   height: 100px; //just for my test
   width: 300px;
   /*top: 0;*/ //dont need, not doing anything
   float: right;
   /*padding-right: 10px;
   padding-left: 10px;*/ //can condense to following:
   padding: 0 10px;
   -moz-box-sizing: border-box; //see padding explanation above
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

或

如果您担心较旧的浏览器，您可以使用display: table和display: table-cell来执行此操作，如下所示：

选项 2 小提琴

.CSS

#main{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0;
  display: table; //add
  table-layout: fixed; //add
}
#left{
  display: table-cell; //use instead of float
  background: red;
  height: 100px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#right{
  display: table-cell; //use instead of float
  background: black;
  height: 100px;
  width: 300px;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 2

不要浮动div，而是尝试在左右窗格或 CSS3 弹性框上display: inline-block（取决于您支持旧版浏览器的时间）。

弹性框示例：http://jsfiddle.net/571k3gx2/