<script type="text/javascript">

 $(function(){

 　　if($("#left").height() > $("#right").height()){

 　　　　$("#right").css("height",$("#left").height());

 　　}else{

 　　　　$("#left").css("height",$("#right").height());

 　　}

 })

 </script>

下面是解决侧边导航栏与主内容区的高度视觉上相同的解决方法。（修改背景颜色）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>左边导航栏与右边内容区高度保持一致的视觉解决方案</title>

 </head>

 <style>

     *{

         margin: 0;

         padding: 0;

     }

     /* 全部 */

     body{

         background-color: #ccc; /* 整体背景颜色 */

     }

     /* 头部 */

     header{

         padding: 10px 260px;

         background-color: #fff;

         border-bottom: 5px solid #ff00ff;

     }

     /* 主要部分 */

     #main{

         width: 1200px;

         margin: 40px auto 40px;

         background-color: #fff; /* 主体部分为白色 */

     }

     #main #aside{ /* 侧边栏 */

         float: left;

         width: 246px;

         height: 200px; /* 侧边栏高度与右边实际高度不同 */

         background-color: #fff; /* 背景颜色 与主要部分相同*/

         border-bottom: 1px solid #000; /* 方便区分 */

     }

     #main #right{ /* 右边内容区 */

         background-color: #ccc; /* 设置背景与整体部分相同 */

         width: 944px;

         margin-left: 246px; /* 为侧边栏宽度 */

         padding-left: 10px; /* 分割侧边栏与内容区 */

     }

     #right-main {

         width: 100%;

         height: 600px; /* 实际高度用元素来拉伸 */

         min-height: 200px; /*让他的最小高度为侧边栏高度 保持高度一致*/

         background-color: #fff; /* 内容去主要部分与侧边栏颜色一致 */

     }

     /* 底部 */

     footer{

         width: 1200px;

         margin: 0 auto;

         padding: 20px 0;

     }

 </style>

 <body>

     <!-- 头部 -->

     <header>

         <h1>我来组成头部</h1>

     </header>

     <!-- 主体 -->

     <div id="main">

         <!-- 侧边栏 -->

         <div id="aside"></div>

         <!-- 右侧 -->

         <div id="right"><!-- 背景为整体颜色 -->

             <!-- 主要内容 -->

             <div id="right-main"></div>

         </div>

     </div>

     <!-- 底部 -->

     <footer>

         <p>Posted by: ProsperLee</p>

         <p>Person Website: <a href="http://www.cnblogs.com/lprosper/">H5江湖上的小白，一个孤独的侠！</a>.</p>

     </footer>

 </body>

 </html>

js控制两个元素高度保持一致的更多相关文章

  1. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  2. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  3. 【JavaScript】Js控制页面所有元素只读

    在页面初始化加载以下readOnlyPage()方法,可实现所有元素只读,方便实用. <script language="javascript"> function r ...

  4. 利用css伪类选择器hover控制两个元素属性

    示例1: <html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-chil ...

  5. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  6. 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  7. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  8. js 元素高度宽度整理

    1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...

  9. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

随机推荐

  1. faster-RCNN台标检测

    最近学习了faster-RCNN算法,收获不少,记此文为证.faster-RCNN是一个目标检测算法,它能够识别多个目标,对目标分类并标注位置,非常好用.它的输入样本是标注好的图片,输出是一个hdf5 ...

  2. Centos安装Grafana

    下载:https://grafana.com/grafana/download $ wget wget https://s3-us-west-2.amazonaws.com/grafana-relea ...

  3. 十进制转化为二进制Java实现

    提取2的幂 这个方法用代码实现貌似有点麻烦,需要探测大小,我只实现了整数十进制到二进制的转化 /* * 提取2的幂 */ public static String TenToBin1(int ten) ...

  4. CVE-2015-1641 Office类型混淆漏洞及shellcode分析

    作者:枕边月亮 原文来自:CVE-2015-1641 Office类型混淆漏洞及shellcode分析 0x1实验环境:Win7_32位,Office2007 0x2工具:Windbg,OD,火绒剑, ...

  5. 《机器学习实战（基于scikit-learn和TensorFlow）》第二章内容的学习心得

    请支持正版图书, 购买链接 下方内容里面很多链接需要我们***,请大家自备梯子,实在不会再请留言,节约彼此时间. 源码在底部,请自行获取,谢谢! 当开始着手进行一个端到端的机器学习项目,大致需要以下几 ...

  6. Thread-方法以及wait、notify简介

    Thread.sleep()1.静态方法是定义在Thread类中.2.Thread.sleep()方法用来暂停当前执行的线程,将CPU使用权释放给线程调度器,但不释放锁(也就是说如果有synchron ...

  7. linux中一些简便的命令之wc

    wc命令是统计文本中的字符数.单词数以及文本行数的,具体参数如下: -l 统计文本中的行数 -w 统计文本中的单词数 -c/m 统计文本中的字符数 -L 统计文本中最长行的字符数 当然使用时也可以不带 ...

  8. HW2017笔试编程题

    一.写一个转换字符串的函数 1.题目描述 将输入字符串中下标为偶数的字符连成一个新的字符串输出,需要注意两点: (1)如果输入字符串的长度超过20,则转换失败,返回“ERROR!”字符串: (2)输入 ...

  9. GO入门——7. 并发

    1 并发 1.1 goroutine Goroutine 奉行通过通信来共享内存,而不是共享内存来通信 goroutine 只是由官方实现的超级"线程池"而已. 每个实例 4-5K ...

  10. 从零开始学 Web 之 ES6（一）ES5严格模式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...