首页 > 代码库 > js改变div高度

js改变div高度

2024-09-02 03:06:47   220人阅读

用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" onl oad="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

 

js改变div高度


联系
我们