相信大家一看到这个题目，有些同学就会叫到：“我也遇到过这样的问题！”，这具体是什么问题呢？
有这样一种页面结构：
left
right
这样的页面结构相信大家经常会遇到，但是这样的结构会出现什么问题呢？经常会遇到，当左边的内容没有右边那么多或者反过来时，就困惑了，左边高度不会跟右边保持一致啊！具体表现如下图：
这就尴尬了~咋办呢？有的同学就给出了以下的css，期待能够解决这个问题：
.container {
overflow: hidden;
}
.container .left, .container .right {
float: left;
}
.container .left {
width: 20%;
height: 100%; /* 可惜不行哦。 */
}
.container .right {
width: 80%;
}结果就是，too 样 too simple~
可以看到，这个办法是行不通的，为什么呢？为什么设置了height为100%却不像预期的那样呈现呢？其实这里面没有正确理解height这个值的设置，具体可以看看MDN的height解释。
几种解决方案：
方案一
给最外的元素设置具体的高度值：
.container {
overflow: hidden;
height: 100px;
}
.container .left, .container .right {
float: left;
}
.container .left {
width: 20%;
height: 100%;
}
.container .right {
width: 80%;
height: 100%;
}这样就可以了，因为子元素的高度使用百分比时，是使用父元素的高度来进行计算的，如果父元素没给出具体的高度，那么会使用auto，而auto由浏览器来计算高度，浏览器计算出来的高度只会是元素的内容高度，所以为什么外部元素不设置高度时，内部元素不会自适应高度.
优点
完美解决左右子元素高度不一致问题
缺点
必须设置外部容器的具体高度，当外部容器的高度不定时，问题就头疼了
子元素设置浮动，如果不设置overflow:hidden，则必须清除浮动，带来不必要的麻烦
方案二
不设置外部元素的具高度，而设置root元素的高度为100%；
html,body {
height: 100%;
}
.container {
height: 100%/inherit;
clear: both;
}
.container:after {
display: block;
content: " ";
clear: both;
}
.container .left, .container .right {
float: left;
}
.container .left {
width: 20%;
height: 100%/inherit;
}
.container .right {
width: 80%;
height: 100%/inherit;
}根据规范和方案一的经验，我们可以知道，当父容器设置了100%时，计算的高度会去找父容器，如果父容器无设置具体值，则会一直向上找，一直找到root元素，那么我们设置root元素为100%，root元素的高度是100%了，当前容器就计算出来是100%了。当然当前元素使用inherit也是可以的，继承于父元素的计算方式。
优点
实现简单，父容器不用设置具体高度值
缺点
依然存在需要清除浮动的举动，因为父容器没有设置overflow:hidden;
方案三
使用display来实现：
.container {
display: table;
width: 100%;
}
.container .left, .container .right {
display: table-cell;
}
.container .left {
width: 20%;
}
.container .right {
width: 80%;
}优点
将父容器的display设置为table，将子元素display设置为table-cell，让左右结构表现为table一样，那么就具有table的一些特性：列高度自适应、上下居中等等。
缺点
暂未发现
方案四
使用相对定位和绝对定位来实现
.container {
position: relative;
}
.container .left {
position: absolute;
width: 20%;
height: 100%;
}
.container .right {
margin-left: 20%;
width: 80%;
height: 100%;
}优点
代码量少，实现简单，兼容性高
缺点
position：relative带来的一些问题（不详细述说，请读者自行挖坑）
方案五
使用flex和设置height实现
html,body{
height: 100%;
}
.container {
display: flex;
height: 100%;
}
.container .left {
width: 20%;
}
.container .right {
width: 80%;
}优点
实现起来非常简单，简单几行代码即可
缺点
兼容性问题，IE10+才能实现，而且在移动端也有一定得兼容性问题
参考资料
MDN
w3规范