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

    从远程服务器读取数据进行处理,直接贴代码: public class ConnectDB { private static String SERVER = "xxx.xxx.xxx.xxx& ...

  2. Intent的简单使用

    主要实现Intent之间值得转递,如从AActivity到BActivity之间传一个数值,一个实体类,一个集合类 下面代码只要是实现对startActivityForResult的使用,用ABC 3 ...

  3. SQLServer存储过程 实例，很多语法可以以后参考

    SQL代码 alter PROCEDURE sp_addnewdtgtype ( ), @dtgdllcontent image, ) ) AS BEGIN ); declare @v_count i ...

  4. 设计模式之模板方法模式（Template）

    一.介绍 模板方法模式是编程中经常用到的模式.它定义了一个操作中的算法骨架,将某些步骤延迟到子类中实现.这样,新的子类可以在不改变一个算法结构的前提下重新定义该算法的某些特定步骤. 二.场景举例 当一 ...

  5. dedecms 去掉栏目页的预览功能

    首先找到include/typeunit.class.admin.php 再找到 ListAllType 方法,该方法的功能是“读出所有分类” 找到并将该方法内的所以以下代码注释或者删除”<a ...

  6. day3 函数、递归、及内置函数

    请查看我的云笔记链接: http://note.youdao.com/noteshare?id=7d5aa803981ae4375a1f648f48e7ade3&sub=5DFD553A6C5 ...

  7. 【转】OpenGL概述

    英文原文 中文译文 1. 计算机图像硬件 1.1 GPU(图像处理单元) 如今,计算机拥有用来专门做图像处理显示的GPU模块,拥有独立的图像处理储存(显存). 1.2 像素和画面 任何图像显示都是基于 ...

  8. nautilus命令

    nautilus 是图形程式效果是以当前用户打开图形界面所以如果想以root打开图形界面使用时记得先切为root,sudo没有用的

  9. UVALive 6261 Jewel heist

    题意:珠宝大盗Arsen Lupin偷珠宝.在展厅内,每颗珠宝有个一个坐标为(xi,yi)和颜色ci. Arsen Lupin发明了一种设备,可以抓取平行x轴的一条线段下的所有珠宝而不触发警报, 唯一 ...

  10. Android（java）学习笔记57：PC and Phone 通信程序

    1. 首先我写的程序代码如下: package com.himi.udpsend; import java.net.DatagramPacket; import java.net.DatagramSo ...