用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高度的更多相关文章

  1. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  2. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  3. 使用js将div高度设置为100%

      在开发的工程中使用到了一些开源的bootstrap模板进行开发,在遇到一些需要替换的内容部分部分时,经常出现高度设置100%无法生效的问题,这里来用js强行设置一下.   思路:js监听窗口的缩放 ...

  4. js改变div宽度

    document.getElementById('Content_Right_id').style.width = document.documentElement.clientWidth - 250 ...

  5. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  6. js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

  7. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  8. js实现div居中

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

随机推荐

  1. Descriptor&web.xml

    Deployment Descriptor部署描述符: - 部署描述符是要部署到Web容器或EJB容器的Web应用程序或EJB应用程序的配置文件. - 部署描述符应包含EJB应用程序中所有企业bean ...

  2. ElasticSearch 5.0 简介

    参考:http://blog.csdn.net/wzhg0508/article/details/52063676 Elasticsearch 5.0 简介(medcl微信直播实录) 大家好,非常高兴 ...

  3. oracle 拆分字符串并转换为表

    使用函数的方式 1. 创建的函数以及类型如下: CREATE OR REPLACE TYPE str_split IS TABLE OF VARCHAR2 (4000);CREATE OR REPLA ...

  4. MFC 对话框Picture Control(图片控件)中静态和动态显示Bmp图片

    版权声明:本文为博主原创文章,转载请注明CSDN博客源地址! 共同学习,一起进步~ https://blog.csdn.net/Eastmount/article/details/26404733   ...

  5. JMeter--使用URL回写来处理用户会话

    如果测试的Web应用系统使用URL回写而非Cookie来保存会话信息,那么测试人员需要做一些额外的工作来测试web站点 为了正确回应URL回写,JMeter需要解析从服务器收到的HTML,并得到唯一的 ...

  6. Scrapy下xpath基本的使用方法

    Scrapy是基于python的开源爬虫框架,使用起来也比较方便.具体的官网档:http://doc.scrapy.org/en/latest/ 之前以为了解python就可以直接爬网站了,原来还要了 ...

  7. 【python】网络编程-套接字常用函数

  8. bzoj 4929: 第三题

    Description 给定n,b,c,d,e以及A0,A1,···,An−1,定义 xk=b×c^4k+d×c^2k+e f(x)=Sigma(Aix^i),0<=i<=n-1 请你求出 ...

  9. onload属性使用方法

    onload事件属性是页面的图片文字等全部加载完毕后执行的事件 window.onload=fun1;function fun1(){    document.getElementsByTagName ...

  10. 深度优先搜索DFS（二）

    总结下图里面的常用模板: DFS(u){ vis[u]=true; for(从u出发能到达的所有顶点v){ if(vis[v]==false){ DFS(v); } } } DFSTrave(G){ ...