用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. C# 使用ZXing.NET生成一维码、二维码

    以上图片是本示例中的实际运行效果,在生活中我们的一维码(也就是条形码).二维码 使用已经非常广泛,那么如何使用c#.net来进行生成一维码(条形码).二维码呢? 使用ZXing来生成是非常方便的选择, ...

  2. MySQL Transaction--RR事务隔离级别下加锁测试

    ============================================================================== 按照非索引列更新 在可重复读的事务隔离级别 ...

  3. 变量延迟(setlocal)之浅见

    变量延迟,浅见认为就是变量预处理,在事先声明变量,告诉cmd环境哪个先哪个后.默认情况下是停用,可以用两种方法启用/停用: 一.cmd /v:on 和cmd /v:off ,范围在cmd这个环境直至e ...

  4. Upgrade to or Install Cinnamon 2.4 in Ubuntu

    http://www.omgubuntu.co.uk/2014/11/install-cinnamon-2-4-ubuntu-14-04-lts sudo add-apt-repository ppa ...

  5. 【转】每天一个linux命令目录

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html 开始详细系统的学习linux常用命令,坚持每天一个命令,所以这个系列 ...

  6. oracle单表选择率（selectivity）——计算执行计划的基数

    CBO优化器是基于对当前经过特定测试的数据集中预期的行比率估计来计算基数的.此处的行数之比是一个数值,称为选择率(selectivity).得到选择率之后,将其与输入行数进行简单相乘既可得到基数. 在 ...

  7. spark数据倾斜

    数据倾斜的主要问题在于,某个分区数量很巨大,在做map运算的时候,将会发生别的分区task很快计算完成,但是某几个分区task的计算成为了系统的瓶颈,明显超过其他分区时间:   1.方案:Kafka的 ...

  8. redux学习与使用

    Redux: 主要概念Action,reducer,store,state 原理:dispatch ({ type:action, preload: { val } } ) --->reduce ...

  9. 关于Qt配置编译器的问题

    PC系统:win10 安装了:Visual Studio 2017 Community ; Qt 5.8.0 运行Qt程序时,出现以下错误: 原因:来自知乎 只安装了VS2017(MSVC 15.0) ...

  10. 如何将JQUERY对象转成Javascript对象

    问: <div id="test"></div> $("#test") //由Javascript对象转为Jquery对象: 但是如何转 ...