实现左侧自适应，右侧固定的布局

固定浮动区域，自适应区域不设置宽度但设置margin

HTML结构

<header></header>
<div class="container">
  <div id="aside">固定区域</div>
  <div id="content">自适应区域</div>
</div>
<footer></footer>

header {
  border: 1px solid green;
  height: 100px;
  margin-bottom: 20px;
}

#content {
  border: 1px solid blue;
  margin-right: 220px;
  height: 800px;
}

#aside {
  float: right;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

footer {
  margin-top: 20px;
  height: 50px;
  border: 1px solid black;
}

但是html中aside必须在content之前!

固定区域使用定位，自适应区域不设置宽度但设置margin

HTML结构

<header></header>
<div class="container">
  <div id="content">自适应区域</div>
  <div id="aside">固定区域</div>
</div>
<footer></footer>

header {
  border: 1px solid green;
  height: 100px;
  margin-bottom: 20px;
}

#content {
  border: 1px solid blue;
  margin-right: 220px;
  height: 800px;
}

#aside {
  position: absolute;
  top: 130px;
  right: 8px;
  border: 1px solid red;
  height: 100px;
  width: 200px;
}

footer {
  margin-top: 20px;
  height: 50px;
  border: 1px solid black;
}

但是增加aside的高度会覆盖footer

float与margin齐上阵

条件：

• aside宽度固定，content宽度自适应
• content要在aside之前
• 后面的元素要能正常显示，不能受影响

HTML结构

<header></header>
  <div class="container">
    <div class="main">
      <div id="content">自适应区域</div>
    </div>
    <div id="aside">固定区域</div>
  </div>
<footer></footer>

header {
  border: 1px solid green;
  height: 100px;
  margin-bottom: 20px;
}

.container {
  height: 800px;
}

.main {
  float: left;
  width: 100%;
  margin-left: -220px;
}

#content {
  border: 1px solid blue;
  margin-left: 220px;
  height: 600px;
}

#aside {
  border: 1px solid red;
  height: 100px;
  width: 200px;
  float: right;
}

footer {
  margin-top: 20px;
  height: 50px;
  border: 1px solid black;
}

设置display为table

HTML结构

<header></header>
<div class="container">
  <div id="aside">固定区域</div>
  <div id="content">自适应区域</div>
</div>
<footer></footer>

header {
  border: 1px solid green;
  height: 100px;
  margin-bottom: 20px;
}

.container {
  display: table;
  width: 100%;
}

#content {
  display: table-cell;
  border: 1px solid blue;
  height: 800px;
}

#aside {
  display: table-cell;
  border: 1px solid red;
  width: 300px;
}

footer {
  margin-top: 20px;
  height: 50px;
  border: 1px solid black;
}