有一个这样的需求：有两个显示内容的框，要使他们高度一致，因为他们存放的内容多少和结构不一样，左边内容少，右边内容多。这就导致了右边会比左边高，解决方法就是超出部分用滚轮显示，那这时就先要调整右边的高度，我立刻想到了使用$().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. 用户选择wordpress程序建站需要知道的一些事情 - 安全、优化速度、配置

    WordPress是我们使用最多的CMS程序之一,无论是我们的个人博客,还是企业网站,甚至中小型站点,我们都可以用WP程序部署.我们看到海外网站的时候,大部分都是用的WORDPRESS程序.在我们国人 ...

  2. CSS3中的Flexbox弹性布局（一）

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  3. PHP 运行环境和服务器相关配置

    1.在DOS命令窗口输入 mysql -hlocalhost -uroot -p回车 进入mysql数据库, 其中-h表示服务器名,localhost表示本地:-u为数据库用户名,root是mysql ...

  4. 面试题之----一次完整的HTTP请求过程

    当我们在浏览器的地址栏输入 www.linux178.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 以下过程仅是个人理解: 域名解析 --> 发起TCP的3次握手 --> ...

  5. python多重继承

    # 动物 Dog - 狗狗: Bat - 蝙蝠: Parrot - 鹦鹉: Ostrich - 鸵鸟. # 哺乳动物 鸟类 # 能跑 能飞 class Animal(object): pass # 大 ...

  6. thinkphp5设置403 404等http状态页面

    在thinkphp5中如何抛出异常状态码(比如401,403,404等),因为这些能极大的给用户以良好的体验. 因为在上线阶段,任何的系统错误信息都不能让浏览用户给看到,比如404(Not Found ...

  7. June 07th 2017 Week 23rd Wednesday

    Failure is the condiment that gives success its flavor. 失败是让成功变美味的调味料. There are kinds of flavors in ...

  8. March 6 2017 Week 10 Monday

    A well-spent day brings happy sleep. 丰盈白日,安眠晚间. Recently my sleep is not so good, for one thing I go ...

  9. Docker入门系列之一：在一个Docker容器里运行指定的web应用

    实现题目描述的这个需求有很多种办法,作为入门,让我们从最简单的办法开始. 首先使用命令docker ps确保当前没有正在运行的Docker实例. 运行命令docker run -it nginx: 然 ...

  10. 应用性能指数（APDEX）是如何计算出来的？

    应用性能指数(APDEX)是如何计算出来的?在应用性能管理领域聚合指标是一种常见手段,主要是用来把成百上千的指标通过某种计算方法聚合成一个或几个指标,用来反映应用的整体健康状态.在这些聚合指标中,比较 ...