<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. 迁移桌面程序到MS Store(5)——.NET Standard

    接下来的几篇,我想讨论下迁移桌面程序到MS Store,可以采用的比较常见.通用性比较强的实施步骤和分层架构. 通常商业项目一般都是不断的迭代,不太可能突然停止更新现有的桌面版本,然后花很长时间从头来 ...

  3. 从零开始的程序逆向之路基础篇 第二章——用OllyDbg(OD)分析一个简单的软件

    作者:Crazyman_Army 原文来自:https://bbs.ichunqiu.com/thread-43469-1-1.html 0x00知识回顾 (由于笔者省事,没开XP虚拟机,而且没关闭A ...

  4. Vue-Cli 搭建项目 小白

    vue-用Vue-cli从零开始搭建一个Vue项目 Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组 ...

  5. 使用ES6的Promise完美解决回调地狱

    相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...

  6. IDEA里五种目录类型简介(Mark Directory as)

    通过File  -> Settings-project Structure-Modules 或者右键Mark Directory as可以找到这五种类型. Sources 一般用于标注类似 sr ...

  7. Java语言访问Redis数据库之Set篇

    如果想通过Java语言对Redis数据库进行访问. 首先,需要安装Redis数据库,可以是Windows系统,或者Linux系统.(本文以Windows系统的本地Redis数据库为例,代码说明如何操作 ...

  8. (转)Linux 系统设置 : dmesg 命令详解

    原文:https://blog.csdn.net/yexiangCSDN/article/details/80683246 https://www.cnblogs.com/duanxz/p/34770 ...

  9. 关于appendChild和insertBefore appendTo()和append

    appendChild和insertBefore(原生js) appendTo()和append(jquery)

  10. JavaScript设计模式----装饰者模式

    装饰者模式的定义: 装饰者(decorator)模式能够在不改变对象自身的基础上,在程序运行期间给对像动态的添加职责.与继承相比,装饰者是一种更轻便灵活的做法. 装饰者模式的特点: 可以动态的给某个对 ...