首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何检查div的高度以重新排列div块

如何检查div的高度以重新排列div块
EN

Stack Overflow用户
提问于 2012-01-30 01:23:33
回答 2查看 705关注 0票数 1

我在我的网站中使用jQuery Masonry来显示博客帖子。而且每个帖子块中都添加了Facebook评论框。当有新的注释时,容器div会扩展,不幸的是会与下面的重叠。在这种情况下,我需要重新运行Masonry脚本来重新加载这些块。

因此,我使用Ben Alman's Jquery Resize Event Plugin来检查div高度的变化,以便砖石脚本根据它们的新大小重新定位块,并避免重叠。

虽然它不工作,而且当我用firebug检查它时,似乎没有错误。我完全是Jquery的新手,我希望我在这里只是犯了一个简单的错误。

如果你想看一下,请查看bjk-tribun.com,当你在评论框中输入一些评论时,你会看到重叠的部分。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  var iframe = $(".fb_iframe_widget");

  // Called once the Iframe's content is loaded.
  iframe.load(function(){
    // The Iframe's child page BODY element.
    var iframe_content = iframe.contents().find('body');

    // Bind the resize event. When the iframe's size changes, update its height as
    // well as the corresponding info div.
    iframe_content.resize(function(){
      var elem = $(this);

      // Resize the IFrame.
      iframe.css({ height: elem.outerHeight( true ) });

      $('#sort').masonry(reloadItems);

    // Resize the Iframe and update the info div immediately.
    iframe_content.resize();
  });
});
EN

回答 2

Stack Overflow用户

发布于 2012-01-30 17:09:07

根据您使用的jQuery版本,您可能需要在css属性中添加px单位:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
iframe.css({ height: elem.outerHeight( true ) + "px" });
票数 0
EN

Stack Overflow用户

发布于 2012-01-30 20:18:24

好吧,我不知道为什么,但一旦我关闭了colorbox.js,这是一个灯箱插件,Jquery砖石插件开始对div调整大小做出反应。因此,如果任何人遇到同样的问题,他们应该首先尝试禁用其他jquery插件,这样就不会花整个星期的时间在这个问题上。

我还禁用了我在上面插入的Ben Alman插件。Masonry足以处理resize事件。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9058400

复制
相关文章
div高度自适应
div高度自适应, 一般设置min-height值即可。 如min-height: 200px, 当div的内容高于200px时, div会自动伸展。IE6不支持这个属性,可以用css hack来解决。
小小许
2018/09/20
2.3K0
div高度自适应
IE7 高度自适应 .boxwrapper { height: 500px; } .box { width: 200px; min-height: 200px; _height: 200px; border: 1px solid #ccc; } 内容高度小于200px test test test test test 内容高度大于200px效果 t
2021/11/08
1.8K0
css div高度设置100%如何生效!
然后他发现这个<div>高度永远是 0,哪怕其父级<body>塞满了内容也是如此。事实上,他需
用户6921669
2020/02/01
5.9K0
Javascript 获取div真实高度
第一种情况就是宽高都写在样式表里。           比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中。           比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。(什么是行内,就是直接在html标签上写样式) 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们
问天丶天问
2018/06/13
5.2K0
iframe的高度自适应_div自适应高度
大家好,又见面了,我是你们的朋友全栈君。 Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html
全栈程序员站长
2022/11/04
7.1K0
div包裹img时div高度高于img的解决办法
代码如下: <div> <img src=''" style="width: 36px; height: 36px;"> </div> 现象如下: image.png 可以看得出,红框里的圆形
飞奔去旅行
2019/06/13
3.9K0
div包裹img时div高度高于img的解决办法
div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> <div class="B">下部DIV </div> </div> CSS: html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: re
庞小明
2018/03/07
5.2K0
div 自适应高度 自动填充剩余高度
div高度设置100%无效的问题
今天遇到一个问题,给div设置高度 height: 100%;却没有生效,在f12审查元素的时候可以看到高度字占据了半屏,并没有占据100%全屏,也就是说,div高度设置100%无效。
王小婷
2019/08/08
5.2K0
div高度设置100%无效的问题
无固定高度的div垂直居中
1、无固定高度的div垂直居中 – CSS 实现效果图如下: 代码附上: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes">
White feathe
2021/12/08
3.1K0
无固定高度的div垂直居中
关于Div的宽度与高度的100%设定
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!
bear_fish
2018/09/19
3.9K0
DIV+CSS侧边栏自适应高度
如上面这个比较经典的两栏布局。 如果sidebar1使用了背景平铺图片或者背景颜色,这时候,如果如果另一侧的mainContent比sidebar1高的话,就会出现sidebar1上半部分是之前指定sidebar1的背景,而下面则是这个container的背景。也就是说sidebar1定义的背景并没有自动随着页面高度的增加而自动延伸下来。
EltonZheng
2021/01/26
2.6K0
内容高度小于窗口高度时版权 div 固定在底部
网站建设中经常遇到文档内容高度小于窗口高度时底部版权 div 固定在底部的问题,纯 css div 底部不太好解决这个问题,这里使用 js 代码来对检测文档高度和窗口高度来实现。
Savalone
2020/02/11
2K0
div 或 span 的高度比 img 的高度要多3px。如何解决?
如果将一个 img 放在 div 或 span 里面,你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0,无效!那么怎么解决这个问题呢?
用户9914333
2022/07/22
1.9K0
div 或 span 的高度比 img 的高度要多3px。如何解决?
div 环形排列_三个div如何并排
红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点;
全栈程序员站长
2022/09/19
2.8K0
div 环形排列_三个div如何并排
div在div中垂直居中水平居中(css如何让div水平居中)
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
全栈程序员站长
2022/08/01
15.1K0
div在div中垂直居中水平居中(css如何让div水平居中)
JS实现div块的拖放,调换位置
主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要对div设置ID): <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } var srcdiv = null; function drag(ev,divdom) { srcdiv=divdom; ev.dataTrans
青梅煮码
2023/03/02
6.7K0
上下div高度动态自适应--另类处理方案
     这段时间在工作中遇到一个看似较为棘手的问题。问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域有动态变化高度的现象。      在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来,供大家参
sam dragon
2018/01/17
3.1K0
上下div高度动态自适应--另类处理方案
div 等块级标签横向排列的方法总结
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~
一墨编程学习
2018/09/14
3.4K0
div 等块级标签横向排列的方法总结
DIV
<div style="width:80%; margin-left:auto; margin-right:auto;"> 滚动条 <div style="position:absolute; height:400px; overflow:auto"></div> div 设置滚动条显示:overflow :yes div 设置滚动条自适应显示:overflow :auto div 设置上下滚动条显示:overflow-y :yes div 设置上下滚动条自适应显示:overflow-y :auto 如果该
一朵灼灼华
2022/08/05
2.1K0
点击加载更多

相似问题

如何动态更新DIV块高度?

60

获取内联块div以填充父节点的高度。

10

如何增加父div的高度(指定高度)以包含子div

20

如何拉伸div高度以填充父div - CSS

7146

伸缩框以拉伸div高度以填充父div的剩余高度

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文