HTML5 + CSS 左右排版自适应高
传统的HTML + CSS的左右排版一般会用 float来处理，但在高度自适应的情况下，由其是当一边的高超出body的100%以后，就会有BUG存在。
现在我介绍Flex排版，以下是Demo， 这个Demo，已经可以完美运行在IE10+，Chrome，FireFox。理论上Safari也应该匹配。
关于Flex的布局的基础知识我引用另外一个博客的教程：Flex 布局教程：语法篇 ，各位同学自行去学习。
以下我重点说说有可能出现问题的地方。
1. <!DOCTYPE html> 当出现这个HTML5的标签时，html,body的样式里面，必须设置高为100%（vh）；
因为，在这个标签的作用下，div的height设置为100%(vh)需要继承父标签，在我们的印象中div最顶层的标签应为<body>，但其实body也不是最顶层的标签，因为它还有<html>这一个最顶级的父标签，所以当div的height设置为100%(vh)时，必需为每一层的父标签均设置100%，包括html与body标签，只要这样的继承关系下里面的div所设置的100%高度才得以生效，其效果与最外层html的高度一样。
2. 为了适应多浏览器，建议使用 "vh" 代替 "%" ；
3. min-height，max-height 样式只能在非IE的浏览器中生效；
4. .main::after是为了解决IE无法使用min-height而存在的，如没有这段CSS则在IE中Flex无法响应body的“height: 100%(vh)”，如果你不打算兼容IE，这段CSS可以删除；
5. left与right里面设置的高度是为了测试内容超出body高度时的效果而设置的，实际使用中没有存在的必要，只要按照正常使用就可以，默认为全屏，当超出body的height时出会出现滚动条。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 6 <title>Flex Test</title> 7 <style> 8 html, body { 9 margin: 0px; 10 padding: 0px; 11 height: 100vh; 12 } 13 .main { 14 display: -webkit-flex; 15 display: flex; 16 -ms-flex-direction: row; 17 flex-direction: row; 18 align-items: stretch; 19 min-height: 100vh; 20 } 21 22 .main::after { 23 content: ''; 24 height: 100vh; 25 width: 0; 26 overflow: hidden; 27 visibility: hidden; 28 float: left; 29 } 30 31 .left { 32 width: 200px; 33 background: #F0F0F0; 34 flex-shrink: 0; 35 } 36 37 .right { 38 flex-grow: 1; 39 background: yellow; 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="main"> 46 <div class="left"> 47 <div style="height: 300px;"> 48 </div> 49 </div> 50 51 <div class="right"> 52 <div style="height: 1000px;"> 53 test test test 54 </div> 55 </div> 56 </div> 57 </body> 58 </html>
