用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. js代码中碰到的函数

    第一个--->字符串的截取substring()方法 substring(a,b)--->[a,b)区间截取字符.下标从0开始.从a下标开始,截取到b下标的前一个字符.返回一个新的字符串 ...

  2. stenciljs 学习四 组件装饰器

    stenciljs 可以方便的构建交互式组件 支持以下装饰器 component prop watch state method element component 说明 component 包含ta ...

  3. junit 知识点

    JUnit 测试框架具有以下重要特性: 测试工具 测试套件 测试运行器 测试分类 测试工具 测试工具是一整套固定的工具用于基线测试.测试工具的目的是为了确保测试能够在共享且固定的环境中运行,因此保证测 ...

  4. 二分查找算法，java实现

    二分查找算法是在有序数组中用到的较为频繁的一种算法. 在未接触二分查找算法时,最通用的一种做法是,对数组进行遍历,跟每个元素进行比较,其时间复杂度为O(n),但二分查找算法则更优,因为其查找时间复杂度 ...

  5. JZ2440 裸机驱动 第7章 内存管理单元MMU

    本章目标:     了解虚拟地址和物理地址的关系:     掌握如何通过设置MMU来控制虚拟地址到物理地址的转化:     了解MMU的内存访问权限机制:     了解TLB.Cache.Write ...

  6. ML(4.1): R C4.5

    决策树模型中最为流行的是C4.5算法,  该类算法70年代末,J Ross Quinlan提出ID3算法,此算法的目的在于减少树的深度.但是忽略了叶子数目的研究.1993年,Quinlan本人以ID3 ...

  7. windows 2008R2 iis7 +php web环境安装

    windows 2008R2 iis7 +php web环境安装 编写人:左丘文 2016-01-24 近来由于在架构一个discuz x3.2的PHP论坛,因此查找了一些有关环境架构的相关资料,在此 ...

  8. bzoj 2571: Getting Rid of the Holidays

    Description B国的国王Johnny在他在位的短短几年里制定了不少的节日(事实上没超过30个),这些节日是为了尊敬各种各样他所想到的东西而设立的.每过一段固定的时间,一个节日将会被举行(即节 ...

  9. Tensorflow笔记——神经网络图像识别（五）手写数字识别

  10. 1037 Magic Coupon （25 分）

    1037 Magic Coupon (25 分) The magic shop in Mars is offering some magic coupons. Each coupon has an i ...