js控制两个元素高度保持一致
<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控制两个元素高度保持一致的更多相关文章
- JS获当前网页元素高度offsetHeight
本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- 【JavaScript】Js控制页面所有元素只读
在页面初始化加载以下readOnlyPage()方法,可实现所有元素只读,方便实用. <script language="javascript"> function r ...
- 利用css伪类选择器hover控制两个元素属性
示例1: <html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-chil ...
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- 使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
- js 元素高度宽度整理
1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...
- JS控制元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
随机推荐
- mysql explain语法详解--优化你的查询
原文地址:http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了mysql如何使用索引来处理select语句以及连接表.可 ...
- 使用NetTcpBinding，WCF服务未能被激活
我的WCF采用的是NetTcpBinding,使用时就会报错,换成BasicHttpBinding,就一切正常 The requested service, 'net.tcp://wcf.xxxxx. ...
- PHP画图的基本步骤GD库
一:PHP新建一个图片步骤: :创建画布: $im=imagecreatetruecolor(300,80) 2:定义颜色: $black=imagecolorallocate($im, 0, 0, ...
- git无法识别新增的文件
问题是这样的我新增几个文件夹打算提交到git库,但输入指令:“git status” 发现新增的文件夹并没有出现在准备提交区里 不知道什么原因造成的后来我百度找到方法 使用指令:“git add -f ...
- Python模块——PrettyTable 模块
简介 PrettyTable 是python中的一个第三方库,可用来生成美观的ASCII格式的表格,十分实用. 安装 pip install prettytable 示例 从已有文件创建 CSV fr ...
- 你（可能）不知道的web api
你(可能)不知道的web api 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍 ...
- 使用First查找集合报错：序列不包含任何匹配元素
原因其实是很简单的: 使用First代表一定能找到,找不到就抛出异常,必须使用try……catch……进行异常的捕获. 推荐使用 FirstOrDefault 或Find 取序列中满足条件的第一个元 ...
- Spring Boot SSL [https]配置例子
前言 本文主要介绍Spring Boot HTTPS相关配置,基于自签证书实现: 通过本例子,同样可以了解创建SSL数字证书的过程: 本文概述 Spring boot HTTPS 配置 server. ...
- CentOS 6.5 网络服务器功能的实现②：运用光盘（镜像）制作一个本地yum源
在用Linux安装软件时(rpm安装方式),有时会出现“包依赖”的现象.因此,我们可以用yum工具来实现一次性安装所有rpm工具包的功能. 实例:在此服务器上用yum的方式安装DHCP服务和TFTP服 ...
- 远程连接服务器或云数据库上的mysql服务 - 赖大大
主要问题有两种: 1.mysql的权限问题. 2.服务器的防火墙和数据库的安全组没设好的问题. 1.权限问题: 首先登录上mysql mysql> use mysql; #使用mysq ...