为什么我用了$().height()还是对不齐呢？

有一个这样的需求：有两个显示内容的框，要使他们高度一致，因为他们存放的内容多少和结构不一样，左边内容少，右边内容多。这就导致了右边会比左边高，解决方法就是超出部分用滚轮显示，那这时就先要调整右边的高度，我立刻想到了使用$().height()来进行调整，但是还是对不齐，还是高出了一点点，思来想去，调代码，终于发现问题所在，原来一切都是惹的祸。

对右边我用了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>
啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦

使用$().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>
啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦

到这里发现高度改变了，但是不是我们想要的那个高度，这时我们去掉右边框的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>
啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦啦

总结：我主要是想说明当你使用$().height()得到的高度不是你想要的值时，有可能是padding影响了你的计算。

posted @ 2017-12-19 10:41  黑星星  阅读(118)  评论(0)  编辑  收藏  举报