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