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

    复选按钮组的设置与单选按钮组的设置相同,只是表现形式为:<input type="checkbox"/>

  2. eclipse中手动设置library,选择编译工具方法

    target=android-25sdk.buildtools=25.0.2 target=android-26android.library=falseandroid.library.referen ...

  3. keras 保存模型

    转自:https://blog.csdn.net/u010159842/article/details/54407745,感谢分享! 我们不推荐使用pickle或cPickle来保存Keras模型 你 ...

  4. Azure 8月众多新版本公布

    Azure 8月新发布:IoT 中心S3 版,Azure 热/冷存储层,DocumentDB,SQL Server Stretch Database, MySQL 5.7, Cloud Foundry ...

  5. mysqldump备份脚本一例

    参考三思老师书中所写,感觉挺好用,记录下来,虽然是抄袭,但是手抄还是很累的,其中用到的其他脚本,在博客中已经记录: mysql_full_backup.sh#!/bin/sh#Created by C ...

  6. linux下安装jdk和配置环境变量

    参考博文:http://www.cnblogs.com/samcn/archive/2011/03/16/1986248.html 系统环境:linux centos 6.4_x64 软件版本:jdk ...

  7. 小故事学设计模式之Observer : (三) 老婆帮忙订机票

    (IT的事就是过场多,过场多了就容易忘,所以我们不妨看一个记一个,这也是一个办法,顺便还能跟同行们交流一下)  要和老婆一起回老家了, 成都离我们安徽太远, 两个人飞一下过去就要花掉近三千块, 于是我 ...

  8. typescript import需要注意的地方以及一点疑问

    在使用 import {XXX} from './xxx'的时候,到浏览器上会报错,提示找不到xxx文件,原因在于没有加入后缀,这时候要写成import {XXX} from './xxx.js'注意 ...

  9. Ural State University Internal Contest October'2000 Junior Session

    POJ 上的一套水题,哈哈~~~,最后一题很恶心,不想写了~~~ Rope Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7 ...

  10. http://codeforces.com/gym/100623/attachments E题

    http://codeforces.com/gym/100623/attachments E题第一个优化它虽然是镜像对称,但它毕竟是一一对称的,所以可以匹配串和模式串都从头到尾颠倒一下第二个优化,与次 ...