为什么我用了$().height()还是对不齐呢?
有一个这样的需求:有两个显示内容的框,要使他们高度一致,因为他们存放的内容多少和结构不一样,左边内容少,右边内容多。这就导致了右边会比左边高,解决方法就是超出部分用滚轮显示,那这时就先要调整右边的高度,我立刻想到了使用$().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()还是对不齐呢?的更多相关文章
- ExtJS入门教程01,Window如此简单,你怎能不会?
		这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Wi ... 
- [PyData] 03 - Data Representation
		Ref: http://blog.csdn.net/u013534498/article/details/51399035 如何在Python中实现这五类强大的概率分布 考虑下在mgrid上画二维概率 ... 
- H5 canvas的 width、height 与style中宽高的区别
		Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ... 
- height:100% 布局
		常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ... 
- 页面width与height使用百分比来划分不起作用解决办法--记录六
		有时候你写 <div style="width:80%;height:100%;border:1px solid red"></div> <div s ... 
- Canvas的width,height 和 样式中Canvas的width,height
		控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ... 
- Canvas设置width与height 的问题!
		最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ... 
- [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 ... 
- [LeetCode] Minimum Height Trees 最小高度树
		For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ... 
随机推荐
- JavaScript入门几个概念
			JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ... 
- 针对 IE的 的优化
			针对 IE 的优化 有些时候,你需要对 IE 浏览器的 bug 定义一些特别的规则,这里有太多的 CSS 技巧(hacks),我只使用其中的两种方法,不 管微软在即将发布的 IE7 beta 版里是否 ... 
- git push & git pull 推送/拉取分支
			git push与git pull是一对推送/拉取分支的git命令. git push 使用本地的对应分支来更新对应的远程分支. $ git push <远程主机名> <本地分支名& ... 
- import模块后查找模块的绝对路径
			>>> import bsddb3>>> bsddb3.__file__'/usr/local/lib/python2.6/site-packages/bsddb3 ... 
- 再学UML-Bug管理系统UML2.0建模实例(二)
			2.3 BMS顺序图(需求模型) 在UML中,我们将顺序图分为两类,一类用于描述系统需求,构造系统的需求模型(分析模型):另一类用于指导设计与实现,构造系统的实现模型(设计模型). ... 
- github 专案介绍 – Python 范例:透过互动式的 Jupyter 和数学解释流行的机器学习演算法
			对于机器学习有兴趣,不少人应该会先从 Andrew Ng ( 吴恩达 ) 的机器学习课程开始,但是吴恩达的课程是使用 octave 这个工具当作练习.这个 github 项目包含使用 Python 实 ... 
- Selenium入门21 Select操作
			select元素有单独的类:from selenium.webdriver.support.ui import Select 界面上选出select元素后,Select(select)进行类型转换就可 ... 
- 用trie树实现输入提示功能,输入php函数名,提示php函数
			参照刘汝佳的trie树 结构体 #include "stdio.h" #include "stdlib.h" #include "string.h&q ... 
- OC typedef(起别名)
			// #define Integer int // 给基本数据类型起别名 void test() { typedef int Integer; typedef Integer MyInteger; t ... 
- IOS GCDAsyncSocket
			// // ViewController.m // 05.聊天室 // // Created by apple on 14/12/5. // Copyright (c) 2014年 heima. Al ... 
