为什么我用了$().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 ...
随机推荐
- AE多用户同时编辑同一个版本数据的解决方法
项目中做了入库的功能,测试一切正常,但是实际使用多个用户同时编辑default版本的时候,问题就来了,StopEditing 错误信息如下 FDO_E_VERSION_REDEFINED -21472 ...
- 【Eclipse】在Eclipse上安装Spket
转自:https://www.cnblogs.com/HDK2016/p/7099383.html 1,Spket是什么? Spket是一种编辑javaScript和XML代码的工具,可以用他自己的 ...
- dialog和dialogFragment的使用及常用问题
今天比较懒,只是列举了一些网址 弹窗之一:dialogFragment的使用 https://blog.csdn.net/sinat_31057219/article/details/76979246 ...
- Dynamics CRM RibbonWorkbench工具使用
这边用的是RibbonWorkbench2016的工具,导入RibbonWorkbench2016解决方案即可.导入成功后在解决方案下面会多出一个快捷键小图标. 一.基本介绍 二.列表页获取选中记录的 ...
- JavaScript专题
1. 在ajax的任何回调方法中,比如success回调,使用return,将会无效 2. //todo
- js常用函数汇总（不定期更新）
1.图片按比例压缩 function setImgSize(){ var outbox_w=imgbox.width(), outbox_h=imgbox.height(); imgbox.find( ...
- Zabbix监控 windows agent安装配置
下载Windows的zabbix客户端 载地址:http://www.zabbix.com/download.php 选择windows版本的agent下载 从官方下载Zabbix Agent后,压缩 ...
- File not Found:DockForm.dcu的解决办法
安装控件时,如果引用了dsgnintf单元,那么就会提示找不到proxy.pas 或者DockForm.dcu的错误,只需在安装控件包时添加“lib\DesignIde.dcp”即可
- May 30th 2017 Week 22nd Tuesday
Knowledge will give you power, but character respect. 知识给你力量,品格给你别人的尊敬. Good characters can help us ...
- python:正则模块
1,正则表达式 正则表达式是用来做字符串的匹配的,正则有他自己的规则,和python没有关系,一种匹配字符串的规则. 2,字符组 在同一个位置可能出现的各种字符组成了一个字符组,在正则表达式中用[]表 ...