js改变div高度
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js改变div⾼度
⽤bootsrap响应式布局的时候，遇到个很恶⼼的问题：左边栏很短很难看！！
于是，想⽤js来⾃动改变左边的⾼度，没成功！！原来是设置的时候，没加单位，坑爹了。
设置⾼度的时候，加上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:///bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https:///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>
View Code。