两个元素 - 固定和灵活的宽度（100％ - 170px）

Question

在我的网站布局的顶层有4个div标签。

第一个是全宽标题部分，带有css：

#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}

底部是全宽页脚：

#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

左边是我的主菜单部分：

#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

所有这3个元素都可以正常工作。他们位于正确的位置，并且不会更改用户在其显示器上的任何屏幕分辨率，或者他们是否在最大屏幕尺寸上查看它。

我的问题在于页面的主要元素 - 所有有趣的东西都在哪里。它直接位于菜单div的右侧 - 或者更确切地说，它应该是。我的css是：

#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}

宽度80％适用于大多数用户，但对于分辨率较低的用户，主要元素会移到菜单下方，这是可怕的。

我理想的是，css #main中设置的宽度类似于（100％ - 170px），因此在菜单和主位之间始终留有一个很好的边距，并且从不将它推到下面菜单。但是，css标准还没有实现这个愿望！

有人可以建议我如何修改我的CSS，为我的所有用户提供一个干净整洁的页面吗？或者我是否需要回到使用表格来设置我的页面？

Answer 1

使用CSS3 calc ^{CanIUse Stats}

width: calc(100% - 170px);

示例：

＆＃13;

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
body{margin:0;}

#aside{
  background:#1CEA6E;
  width: 170px;
  float:left;
  padding:24px;
}
#main{
  background:#C0FFEE;
  width: calc(100% - 170px);
  float:left;
  padding:24px;
}

＆＃13;

<div id="aside">Aside</div>
<div id="main">Main</div>

＆＃13;

＆＃13;

＆＃13;

使用float: left;和overflow

＆＃13;

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
body{margin:0;}

#aside{
  width: 170px;         /* You, be fixed to 170 */
  float: left;          /* and floated to the left */
  background:#1CEA6E;
  padding:24px;
}
#main{
  background:#C0FFEE;
  padding:24px;
  overflow:auto;        /* in order to preserve padding */
  /* or you could use a .clearfix class (Google for it) */
}

＆＃13;

<div id="aside">Aside</div>
<div id="main">Main</div>

＆＃13;

＆＃13;

＆＃13;

使用CSS3 flex ^{CanIUse Stats}

＆＃13;

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
body{margin:0;}

#parent{
  display:flex;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background:#1CEA6E;
  padding:24px;
}
#main{
  flex:1;               /* You... fill the remaining space */
  background:#C0FFEE;
  padding:24px;
}

＆＃13;

<div id="parent">
  <div id="aside">Aside</div>
  <div id="main">Main</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用样式display: table;

＆＃13;

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
body{margin:0;}

#parent{
  display: table;
  border-collapse: collapse;
  width: 100%;
}
#parent > div {
  display: table-cell;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background:#1CEA6E;
  padding:24px;
}
#main{
  background:#C0FFEE;
  padding:24px;
}

＆＃13;

<div id="parent">
  <div id="aside">Aside</div>
  <div id="main">Main</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你要找的？ 不需要任何css3

.wrapper {
  width: 800px;
  height: 800px;
  background-color: blue;
}
.content {
  width: auto;
  height: 100%;
  background-color: yellow;
}
.menu {
  width: 170px;
  height: 100%;
  float: left;
  background-color: red;
}

<div class="wrapper">
  <div class="menu">Menu</div>
  <div class="content">
  Aside
  </div>
</div>

Answer 3

您可以使用＆＃39; calc＆＃39;所有现代浏览器和IE9 +支持的功能，或切换到flexbox（由IE11 +支持）

请参阅此笔：https://codepen.io/neutrico/pen/MyXmxa

width: calc(100% - 170px);

请注意，除非您设置＆＃39;框大小调整＆＃39;到边境框＆＃39; （或者只是删除这些边框并将它们应用于子元素）。