<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body { height: 100%margin: 0padding: 0}
.wrap { width: 100%height: 100%}
.fixed { float: leftwidth: 200pxheight: 100% background: #000margin-left: -100%}
.main { float: leftwidth: 100%height: 100%}
.main-inner { margin-left: 200px background: #f00height: 100%}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="main-inner">
test
</div>
</div>
<div class="fixed">a</div>
</div>
</body>
</html>
-------
html和body的高度设置为100%, 这样才能让div#wrap的高度生效.
若要将左侧高度固定,将.fixed的height设置为固定值就行了.
浮动是最普遍实现的方式，但 css 浮动的初衷并不是用于布局的，所以浮动布局迟早会被淘汰，应该作为备选方式使用。
绝对定位方式有个缺点，当左边高于右边时，左边会超出父元素，需要使用 js 补救。
flex 是最鼓励使用的方式，低端 IE 不支持，但在移动端得到了广泛的使用。
实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。
例：
此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。
解决办法：
补充flex左右布局，左边固定，右边自适应，并且两列等高自适应
