点击时会显示元素但页面高度保持不变？

Question

以下代码会在点击#row-中的标签时显示#row-product_id_page-0-0元素：

 $('#row-product_id_page-0-0 label').click(function() {
    var str = $(this).find('.am-product-title').text()
    var levelText = str.substring(0, 15)

    $('#row-html2-0, #row-html3-0, #row-html4-0').show()    
    $('#row-qfauto-1, #row-qfauto-2, #row-email-0, #row-pass-0').show()    
    $('#row-pass-confirm, #row-buttons').show()    

    $('#row-html3-0 span').text(levelText)

  })

点击标签前的DOM：

点击标签后：

奇怪的是，元素出现但页面的高度保持不变：

点击之前：

点击后：

如果我打开Chrome检查程序（Firefox中也出现同样的问题），那就好像没有什么东西可以搞定：

我感到困惑。可能是什么问题？

直播网站：http://clo2015.chineselearnonline.com/amember/signup/landing

Answer 1

这个技巧将起作用：

$('#row-product_id_page-0-0 label').click(function() { 
    $(window).resize(); 
});

这也说明了当您打开检查器时，新创建的元素将以正确的方式呈现的原因，因为当您打开检查器时，浏览器将触发窗口调整大小事件。您可以尝试拖动窗口以稍微调整大小，您将看到相同的效果。

我没有深入研究您的javascript代码，但您可以查看在window.resize事件中注册的处理程序。答案可能就在那里。

注意：

我认为Albert Xing就在这里：

  

您已动态设置<div role="main">内的高度   .container。这个div正在溢出。

Answer 2

您已在<div role="main">内动态设置.container的高度。这个div正在溢出。

当您打开开发工具时，窗口会调整大小，重新计算div的高度。

你可能想要

1. 选择一个选项时调用$(window).resize()（这是一种解决方法而非修复）
2. 找到另一种处理布局的方法，而无需动态设置容器的高度