<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex 嵌套 之 高度自适应</title> <style media="screen"> * { margin: 0; padding: 0 } .flex { display: -webkit-flex; display: flex; width: 100%; flex-direction: column; } .flex-main { display: -webkit-flex; display: flex; /*height: 300px; 在window.onload中设置*/ width: 100%; align-items: stretch; } .item { flex: 1; background: red; } .overflow { overflow: auto; } .contener { background: pink; border: 0px solid silver; } .contener > div { padding: 0px; } #resize { width: 5px; height: 100%; cursor: w-resize; float: left; } </style> </head> <body> <div id="allbody" class="flex contener overflow"> <!-- overflow: auto 高度自适应必须 --> <div style="background-color: #3a8ee6;height: 54px;"> <h3>内容器 - 头部信息</h3> </div> <div id="box" class="flex-main"> <div id=left style="200px;background:yellow"> 左 </div> <div id="resize"></div> <div id="right" class="item overflow"> <!-- overflow: auto 高度自适应必须 --> 内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br> 内容溢出滚动部分 <br>内容溢出滚动部分 <div style="200px;height:200px;background:yellow"> 里面月33333 </div> <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br> 内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br> <div style="200px;height:200px; background: #ccc;"> 里面1 </div> <div style="200px; height:200px;background:yellow"> 里面2 </div> </div> </div> <div style="background-color: #6f7180;"> <h5>内容器 - 尾部信息</h5> </div> </div> <script> window.onresize = function () { var hi = getViewPortHeight(); console.log(hi) document.getElementById("allbody").style.height = hi + "px"; } window.onload = function () { var hi = getViewPortHeight(); console.log(hi) document.getElementById("allbody").style.height = hi + "px"; document.getElementById("box").style.height = hi + "px"; var resize = document.getElementById("resize"); var left = document.getElementById("left"); var right = document.getElementById("right"); var box = document.getElementById("box"); resize.onmousedown = function (e) { var startX = e.clientX; resize.left = resize.offsetLeft; document.onmousemove = function (e) { var endX = e.clientX; var moveLen = resize.left + (endX - startX); var maxT = box.clientWidth - resize.offsetWidth; if (moveLen < 150) moveLen = 150; if (moveLen > maxT - 150) moveLen = maxT - 150; resize.style.left = moveLen; left.style.width = moveLen + "px"; right.style.width = (box.clientWidth - moveLen - 5) + "px"; } document.onmouseup = function (evt) { document.onmousemove = null; document.onmouseup = null; resize.releaseCapture && resize.releaseCapture(); } resize.setCapture && resize.setCapture(); return false; } } // 获取浏览器窗口的可视区域的高度 function getViewPortHeight() { return document.documentElement.clientHeight || document.body.clientHeight; } </script> </body> </html>