用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. CH4201 楼兰图腾

    题意 4201 楼兰图腾 0x40「数据结构进阶」例题 描述 在完成了分配任务之后,西部314来到了楼兰古城的西部.相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀('V'), ...

  2. LG2731 骑马修栅栏 Riding the Fences

    题意 John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入栅栏网络的描述,并计算出一条修栅栏的路径,使每个栅栏都恰好被经过一次.John能从任何一个顶点( ...

  3. Django FBV和CBV -

    一.FBV和CBV 在Python菜鸟之路:Django 路由.模板.Model(ORM)一节中,已经介绍了几种路由的写法及对应关系,那种写法可以称之为FBV: function base view ...

  4. Android USB gadget框架学习笔记

    一 Gadget框架结构 kernel/drivers/usb/gadget,这个目录是android下usbgadget的主要目录. Gadget功能组织单元:主要文件android.c,usb g ...

  5. Linux下软件包安装

    编译dbus下载地址 :http://dbus.freedesktop.org/releases/dbus/tar zxvf dbus-1.10.0echo ac_cv_have_abstract_s ...

  6. graphql-modules 企业级别的graphql server 工具

    graphql-modules 是一个新开源的graphql 工具,是基于apollo server 2.0 的扩展库,该团队 认为开发应该是模块化的. 几张来自官方团队的架构图可以参考,方便比较 a ...

  7. Javascript 正则验证带 + 号的邮箱地址

    很多邮箱地址是可以加上 + 加号为同一个邮箱地址. 比如 Gmail. 如果需要验证带 + 号的邮箱,如下: str = "65485+55@gmail.com"; documen ...

  8. asm数据文件迁移(os–>asm)

    --添加测试表空间 SQL> create tablespace xff datafile '/u01/oradata/xifenfei.dbf' size 10m autoextend on ...

  9. centos6 安装GitLab

    环境 Requirements 软件 版本CentOS 6.6Python 2.6Ruby 2.1.5Git 1.7.10+Redis 2.0+MySQL GitLab 7-8-stableGitLa ...

  10. JQuery获得内容 - text()、html() 以及 val()

    获得text()和html() <!DOCTYPE html><html><head><script src="/jquery/jquery-1.1 ...