調整大小時DIV不縮小

Question

因此，我有一個包含兩個簡單DIV窗格的站點：左側是一個內容區域，右側是一個固定的300px菜單，兩個菜單的最大值均為1200px。 我希望用戶能夠調整窗口的大小，並使LEFT窗格縮小，而右側菜單保持固定。 但是現在我找不到任何方法，一切看起來都達到最大大小，但是如果我調整窗口大小，則左窗格不會縮小，而是將右菜單包裹到屏幕底部。 使用左側菜單會很容易，但是菜單在右側。 這是我到目前為止的內容：

#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來完成此操作， display: table ：

選項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，請嘗試在左側和右側窗格上display: inline-block或CSS3 flexbox （取決於您支持舊版瀏覽器的距離）。

Flexbox示例： http ： //jsfiddle.net/571k3gx2/