js改变div高度
Posted 寻坑者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js改变div高度相关的知识，希望对你有一定的参考价值。
用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.csdn.net/m0_37746315/article/details/83030423
以上是关于js改变div高度的主要内容，如果未能解决你的问题，请参考以下文章