页面加载时div高度输出为0？

Question

我正在构建一个 shopify 主题。我有一个实例，其中一个 div 与另一个重叠。在左 div 比右 div 短（绝对定位）的情况下，右 div 按预期与它下方的 div 重叠。

为了解决这个问题，我尝试编写一些在 jsFiddle 中工作的 js，但在我的实际站点中，div 高度输出为 0，因此该函数不起作用。对于我的生活，我无法弄清楚为什么左右 div 的高度都是 0 并且想知道是否有人能够阐明一些问题？

JS

var productImgHeight = $('.left').outerHeight(),
productInfoHeight = $('.right').outerHeight(),
gap = productInfoHeight - productImgHeight;

if (productImgHeight < productInfoHeight) {
    alert(productImgHeight);
    $('.left').css({"margin-bottom":gap+"px"});
} else {
    $('.left').css({"margin-bottom":"0"});
}

提前致谢！

Answer 1

如果您的内容位于隐藏元素中（不显示或隐藏可见性），那么您的高度将始终为 0，我发现绕过它的唯一方法是：

• 使用具有样式的类将元素隐藏在页面之外 - position:fixed; left:100%
• 获取负载高度
• 用js隐藏元素并移除类
• 淡入淡出

var productImgHeight = $('.left').outerHeight(),
  productInfoHeight = $('.right').outerHeight(),
  gap = productInfoHeight - productImgHeight;

if (productImgHeight < productInfoHeight) {
  console.log(productImgHeight);
  $('.left').css({
    "margin-bottom": gap + "px"
  });
} else {
  $('.left').css({
    "margin-bottom": "0"
  });
}


$('.container').hide().removeClass('fixed').fadeIn()

.fixed {
  position: fixed;
  left: 100%;
  top: 100%;
}
.container {
  position: relative;
}
.left {
  width: 400px;
  height: 400px;
  background-color: blue;
  opacity: 0.5;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 15;
  width: 300px;
  height: 500px;
  background-color: green;
  opacity: 0.5;
}
footer {
  width: 100%;
  height: 200px;
  background-color: pink;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container fixed">
  <div class="left">Left
  </div>
  <div class="right">Right
  </div>
  <footer>Footer</footer>
</div>

Updated fiddle

Answer 2

您的 DOM 必须完全加载才能使这些功能正常工作。将其包裹在同样由 jQuery 提供的 ready 函数中：

$(document).ready(function () {
    var productImgHeight = $('.left').outerHeight(),
        productInfoHeight = $('.right').outerHeight(),
        gap = productInfoHeight - productImgHeight;

    if (productImgHeight < productInfoHeight) {
        alert(productImgHeight);
        $('.left').css({"margin-bottom":gap+"px"});
    } else {
        $('.left').css({"margin-bottom":"0"});
    }
});

另外：确保元素没有被display: none; 隐藏，因为那样 - 它没有高度。您可以解决此设置，使其显示（不可见）、获取高度，然后再次隐藏。

$('.left').css({
    display: "block",
    opacity: 0 //Invisible to user
});
var productImgHeight = $('.left').outerHeight();
$('.left').css({
    display: "none",
    opacity: 1
});