jQuery设置line-height等于父容器的高度 [英] jquery set line-height equal to parent container height

问题描述

我需要根据包含div的高度为h4动态设置行高.高度将根据内容和屏幕尺寸而改变.

I need to set the line-height dynamically for an h4 based on how high the containing div is. Height will change based on content and screensize.

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，但它不起作用.

This isn't working. I've tried a couple of different ways to pass divHeight through but it doesn't work.

已使用Bootply更新 http://www.bootply.com/9fOHaR0iv0

Updated with a bootply http://www.bootply.com/9fOHaR0iv0

推荐答案

在使用bootply链接进行更新之后，似乎您的div中加载了图片，这些图片定义了div的高度.

following your update with bootply link, it seems you have pictures load in your div which define the div's height.

您已经在$(document).ready()中运行了代码，该代码在DOM加载后立即执行，而实际上您需要等到所有图像而不是DOM加载完毕.

you have run your code inside $(document).ready() which executes once DOM loads, when in fact you need to wait until all the images load and not the DOM.

您应该更改

$(document).ready()

收件人:

$(window).load()

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

it will make sure that all images are loaded, and then you will get the correct height.

这是您的固定代码: 启动

here is your fixed code: Bootply

这篇关于jQuery设置line-height等于父容器的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！