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

    JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...

  2. 针对 IE的 的优化

    针对 IE 的优化 有些时候,你需要对 IE 浏览器的 bug 定义一些特别的规则,这里有太多的 CSS 技巧(hacks),我只使用其中的两种方法,不 管微软在即将发布的 IE7 beta 版里是否 ...

  3. git push & git pull 推送/拉取分支

    git push与git pull是一对推送/拉取分支的git命令. git push 使用本地的对应分支来更新对应的远程分支. $ git push <远程主机名> <本地分支名& ...

  4. import模块后查找模块的绝对路径

    >>> import bsddb3>>> bsddb3.__file__'/usr/local/lib/python2.6/site-packages/bsddb3 ...

  5. 再学UML-Bug管理系统UML2.0建模实例（二）

    2.3 BMS顺序图(需求模型)       在UML中,我们将顺序图分为两类,一类用于描述系统需求,构造系统的需求模型(分析模型):另一类用于指导设计与实现,构造系统的实现模型(设计模型).     ...

  6. github 专案介绍 – Python 范例：透过互动式的 Jupyter 和数学解释流行的机器学习演算法

    对于机器学习有兴趣,不少人应该会先从 Andrew Ng ( 吴恩达 ) 的机器学习课程开始,但是吴恩达的课程是使用 octave 这个工具当作练习.这个 github 项目包含使用 Python 实 ...

  7. Selenium入门21 Select操作

    select元素有单独的类:from selenium.webdriver.support.ui import Select 界面上选出select元素后,Select(select)进行类型转换就可 ...

  8. 用trie树实现输入提示功能，输入php函数名，提示php函数

    参照刘汝佳的trie树 结构体 #include "stdio.h" #include "stdlib.h" #include "string.h&q ...

  9. OC typedef(起别名)

    // #define Integer int // 给基本数据类型起别名 void test() { typedef int Integer; typedef Integer MyInteger; t ...

  10. IOS GCDAsyncSocket

    // // ViewController.m // 05.聊天室 // // Created by apple on 14/12/5. // Copyright (c) 2014年 heima. Al ...