为什么我用了$().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 ...
随机推荐
- CSS3中的Flexbox弹性布局（二）
flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...
- nginx配置+uwsgi+负载均衡配置
nginx静态文件配置 location /static{ alias /var/www/myApp/static; } sudo mkdir -vp /var/www/myApp/static/ s ...
- Nginx-php-mysql
1.依赖包 yum -y install pcre* openssl*2.phprpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpmyum i ...
- Flutter仿照airbnb创建app
github地址:https://github.com/GainLoss/flutter-app 一.基础 flutter是谷歌公司开发的开源免费的UI框架,用dart语言实现的,可以实现跨平台,一套 ...
- ABAP的语法高亮是如何在浏览器里显示的
这篇文章的原文我发表在SAP官方社区上:https://blogs.sap.com/2018/03/09/how-abap-syntax-highlight-is-implemented-in-web ...
- OC @protocol(声明协议 )
@protocol Study; int main(int argc, const char * argv[]) { @autoreleasepool { Student *stu = [[[Stud ...
- Power Designer逆向工程连接数据库创建pdm-oracle
1.进入菜单文件-Reverse Engineer-Database... 2.打开窗口,选择数据库版本,点击[确定] 3.打开窗口,选择Usering a data source: 4.如果已经有d ...
- BZOJ1951:[SDOI2010]古代猪文(Lucas,CRT)
Description “在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心……” ——选自猪王国民歌 很久很久以前,在山的那边 ...
- 郑州集训day1自闭有感
被拉到郑州培训了 考了一上午莫名自闭 帮助慎老师拿到\(rk1\)非常开心 简述一下题目吧 T1.まんふは函数 原题地址 考原题还行 据说是\(Huffman\)树 在成爷爷的再三讲解下,我终于明白了 ...
- Object c的NSString的使用，创建，拼接和分隔，子string，substring
main: // // main.m // StringDemo // // Created by 千 on 16/9/22. // Copyright © 2016年 kodulf. All ...