用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. 【HAOI2010】订货

    可以DP也可以是费用流,然而被我用非常简单的DP破了[开心] 原题: 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付存贮费用m,假定 ...

  2. restheart 基本使用

    restheart 是一个方便基于mongodb的restapi 开发框架 参考项目 https://github.com/rongfengliang/restheart-docker-compose ...

  3. 【Android界面实现】AppWidght全面学习之电量监控小部件的实现具体解释

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/35791047 前几天翻看之前下载的各种资料 ...

  4. mysql 严格模式 Strict Mode说明

    1.开启与关闭Strict Mode方法 找到mysql安装文件夹下的my.cnf(windows系统则是my.ini)文件 在sql_mode中增加STRICT_TRANS_TABLES则表示开启严 ...

  5. RAC1——Clusterware概念简介1

    一 集群环境下的一些特殊问题 1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. O ...

  6. koa 知识点

    1. Koa 不支持 直接调用底层 res 进行响应处理.请避免使用以下 node 属性: res.statusCode res.writeHead() res.write() res.end() 2 ...

  7. JSOI2008——星球大战

    题目:https://www.luogu.org/problemnew/show/1197 并查集. 难点是若依次去掉点在求连通块个数,时间太长. 精妙的思维:先全部读入,再逆向求连通块个数——增加点 ...

  8. 【python】python GUI开发框架介绍

    Python GUI开发的库不少.最常用的的也就几个. Tkinter -Tk是Python自带的GUI库, 上手简单, 做个简单界面基本够用了,但是不够美观,功能不全面. wxPython -开源免 ...

  9. debian之apt源

    美国的 deb http://ftp.us.debian.org/debian stable main contrib non-freedeb-src http://ftp.us.debian.org ...

  10. lwip编译选项

    修改默认选项时,不要修改opt.h文件,通过lwipopts.h修改. 和内存管理以及TCP发送性能相关的选项 // 为1时使用系统库malloc/free进行内存管理 #ifndef MEM_LIB ...