有一个这样的需求：有两个显示内容的框，要使他们高度一致，因为他们存放的内容多少和结构不一样，左边内容少，右边内容多。这就导致了右边会比左边高，解决方法就是超出部分用滚轮显示，那这时就先要调整右边的高度，我立刻想到了使用$().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()还是对不齐呢？的更多相关文章

  1. ExtJS入门教程01，Window如此简单，你怎能不会？

    这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Wi ...

  2. [PyData] 03 - Data Representation

    Ref: http://blog.csdn.net/u013534498/article/details/51399035 如何在Python中实现这五类强大的概率分布 考虑下在mgrid上画二维概率 ...

  3. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  4. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  5. 页面width与height使用百分比来划分不起作用解决办法--记录六

    有时候你写 <div style="width:80%;height:100%;border:1px solid red"></div> <div s ...

  6. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  7. Canvas设置width与height 的问题！

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  8. [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 ...

  9. [LeetCode] Minimum Height Trees 最小高度树

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

随机推荐

  1. C++基础--结构体声名

    struct是一种数据结构,当需要存储的相关数据为一个集合时,struct是很好的选择;例如,当存储student,学生的学号, 名字,年龄,身高,就构成了一个集合,用stuct声名为: typede ...

  2. 搭建 Spring 2.5.6 开发环境

    1.jar 包准备: spring 2.5.6 的 jar 包(链接: http://pan.baidu.com/s/1skVFfcx 密码: mbiz),如图: commons-logging-1. ...

  3. PHP 运用rsa加密和解密实例

    1.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以) 下载开源RSA密钥生成工具openssl(通常Linux系统都自带该程序),解压缩至独立的文件夹,进入其中的bin ...

  4. 使用 yield生成迭代对象函数

    https://www.cnblogs.com/python-life/articles/4549996.html https://www.liaoxuefeng.com/wiki/001431608 ...

  5. django模型详解(四)

    1 概述 (1)概述 : Django对各种数据库提供了很好的支持,Django为这些数据库提供了统一的调用API,根据不同的业务需求选择不同的数据库 (2)定义模型 模型,属性,表,字段间的关系 一 ...

  6. vue+node+mongodb实现的功能

    用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...

  7. oozie coordinator 定时调度

      (本段内容摘自http://blog.sina.com.cn/s/blog_e699b42b0102xjqw.html  Oozie总结 行成于思的博客)      Oozie提出了Coordin ...

  8. 防止HTML出现滚动条时页面的抖动

    <html> <style> * { padding: 0; margin: 0; } body { font: 40px fantasy; } .container { wi ...

  9. 模线性方程&&中国剩余定理及拓展

    一.求解模线性方程 由ax=b(mod n) 可知ax = ny + b 就相当于ax + ny = b 由扩展欧几里得算法可知有解条件为gcd(a, n)整除d 可以直接套用扩展欧几里得算法 最终由 ...

  10. sqlite配置下载安装教程

    安装教程 第一步: 首先去官网下载:https://www.sqlite.org/download.html 或直接下载:https://github.com/weibanggang/sqlite 下 ...