jquery set line-height等于父容器高度

Question

我需要根据包含div的高度动态设置h4的行高。高度将根据内容和屏幕大小而变化。

HTML

  <div class="col-sm-6 left">
    <div>
      <h4>Lorem ipsum</h4>
    </div>
  </div>

jquery的

// set line height of h4 to height of containing div
var divHeight = $('.left').height();

$('.left h4').css('line-height',divHeight);

这不起作用。我已经尝试了几种不同的方法来通过divHeight，但它不起作用。

更新了bootply http://www.bootply.com/9fOHaR0iv0

Answer 1

您需要添加＆＃39; px＆＃39;

$('.left h4').css('line-height',divHeight + 'px');

Answer 2

在使用bootply链接进行更新后，您的div中的图片似乎已加载，用于定义div的高度。

你在$(document).ready()内运行你的代码，这些代码在DOM加载后执行，而实际上你需要等到所有图像加载而不是DOM。

你应该改变你的

$(document).ready()

为：

$(window).load()

它将确保所有图像都已加载，然后您将获得正确的高度。

这是您的固定代码： Bootply