用bootsrap响应式布局的时候，遇到个很恶心的问题：左边栏很短很难看！！
于是，想用js来自动改变左边的高度，没成功！！原来是设置的时候，没加单位，坑爹了。
参考：http://blog.sina.com.cn/s/blog_3d8c704c0101145y.html
设置高度的时候，加上px
<script>
function load(){
var height = window.innerHeight;
document.getElementById("sidebarOuter").style.minHeight = height+"px";
document.getElementById("if").style.minHeight = height+"px";
}
</script>
然后整个左边栏，就和浏览器高度一致了：
完整源码如下，备忘：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>danny.yao学习记录</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/css/sidebar-menu.css">
<style type="text/css">
.main-sidebar{
position: absolute;
top: 0;
left: 0;
height: 100%;
min-height: 100%;
width: 230px;
z-index: 810;
background-color: #222d32;
}
</style>
<body id="body" onload="load()"> <div class="col-lg-2" id="sidebarOuter">
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu" style="display: none;">
<li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>
<li class=""><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">new</small>
</a>
</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span>Charts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li> </section>
</aside>
</div>
<div class="col-lg-10 container">
<iframe id="if" src="table.html" style="min-width: 100%; min-height:100%; border: 0;"></iframe>
</div> <script src="dist/js/jquery-3.1.1.js"></script>
<script src="dist/js/sidebar-menu.js"></script>
<script>
$.sidebarMenu($('.sidebar-menu'))
</script>
<script>
function load(){
var height = window.innerHeight;
document.getElementById("sidebarOuter").style.minHeight = height+"px";
document.getElementById("if").style.minHeight = height+"px";
}
</script>
</head>
</body>
</html>
Vue/element-ui中调整iframe宽度：https://blog.****.net/m0_37746315/article/details/83030423