为什么我用了$().height()还是对不齐呢？
有一个这样的需求：有两个显示内容的框，要使他们高度一致，因为他们存放的内容多少和结构不一样，左边内容少，右边内容多。这就导致了右边会比左边高，解决方法就是超出部分用滚轮显示，那这时就先要调整右边的高度，我立刻想到了使用$().height()来进行调整，但是还是对不齐，还是高出了一点点，思来想去，调代码，终于发现问题所在，原来一切都是padding惹的祸。
对右边我用了padding进行了排版：
<style type="text/css">
.left-con{
width: 30px;
border: 1px solid red;
display: inline-block;
}
.right-con{
padding: 7px;
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
}
</style>
<body>
<div class="left-con">啦啦啦啦啦啦啦啦</div>
<div class="right-con">啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
</body>
.left-con{
width: 30px;
border: 1px solid red;
display: inline-block;
}
.right-con{
padding: 7px;
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
}
使用$().height()调整高度并且用滚轮显示右边多余部分。
.right-con{
padding: 7px;
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
<script type="text/javascript">
var a=$('.left-con').height();
$('.right-con').height(a);
</script>
.left-con1{
width: 30px;
border: 1px solid red;
display: inline-block;
}
.right-con1{
padding: 7px;
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
到这里发现高度改变了，但是不是我们想要的那个高度，这时我们去掉右边框的padding值，你会发现左右两边的高度一致了。
.right-con{
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
<script type="text/javascript">
var a=$('.left-con').height();
$('.right-con').height(a);
</script>
.left-con2{
width: 30px;
border: 1px solid red;
display: inline-block;
}
.right-con2{
width: 30px;
border: 1px solid green;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
总结：我主要是想说明当你使用$().height()得到的高度不是你想要的值时，有可能是padding影响了你的计算。
为什么我用了$().height()还是对不齐呢？的更多相关文章
- ExtJS入门教程01，Window如此简单，你怎能不会？
这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Wi ...
- [PyData] 03 - Data Representation
Ref: http://blog.csdn.net/u013534498/article/details/51399035 如何在Python中实现这五类强大的概率分布 考虑下在mgrid上画二维概率 ...
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- height:100% 布局
常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...
- 页面width与height使用百分比来划分不起作用解决办法--记录六
有时候你写 <div style="width:80%;height:100%;border:1px solid red"></div> <div s ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- Canvas设置width与height 的问题！
最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...
- [LeetCode] Queue Reconstruction by Height 根据高度重建队列
Suppose you have a random list of people standing in a queue. Each person is described by a pair of ...
- [LeetCode] Minimum Height Trees 最小高度树
For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...
随机推荐
- Java开发坏境配置
在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建" ...
- javascript对象(3)
这个对象,不是那个对象,第三哦! 对象之间会存在继承,所以,来说一下他们之间存在的三种三种继承方式: 1.冒用继承 //创建了孙悟空构造函数 function Sun(change,weapon,gf ...
- js实现螺旋纹理特效
效果如下 实现代码如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...
- Swiper双向轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Spark应用(app jar)发布到Hadoop集群的过程
记录了Spark,Hadoop集群的开启,关闭,以及Spark应用提交到Hadoop集群的过程,通过web端监控运行状态. 1.绝对路径开启集群 (每次集群重启,默认配置的hadoop集群中tmp文件 ...
- js 时间特效
http://example.com:1234/test.htm#part2:Hash的作用. http://www.cnblogs.com/Interkey/p/RunAsAdmin.html
- Servlet和SpringMVC补课
1.web.xml加载顺序 http://mianhuaman.iteye.com/blog/1105522 关键点:ServletContext -> context-param -> ...
- <context:property-placeholder>配置资源文件
直接在 spring 配置文件里面加上 <context:property-placeholder file-encoding="UTF-8" location=" ...
- Oracle 11.1.0.6 导入导出bug
实验环境: 11.1.0.6.0 对ANONYMOUSUSER_ALL表中分区进行备份 SQL> select TABLE_NAME,PARTITION_NAME,HIGH_VALUE,PA ...
- 团队合作之Scrum
CCSU小助手 一:开发团队简介 队名:瓜队 组员:钟文兴.周畅.吉刘磊.唐仲勋 宣言:We are a team at any time! 团队项目描述: 内容:“生活在长大”: 目标:为了方便对学 ...