使跨度高度等于其父div的高度

Question

我想更改元素的高度，使其与父元素的高度匹配：

<div id="div-login-msg" class="alert">
    <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
    <span id="text-login-msg">Some message</span>
</div>

#icon-login-msg
{
    width: 30px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}

当通过AJAX POST表单时，

text-login-msg会发生变化：

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag)
{
    var $msgAnimateTime = 150;

    $msgId.fadeOut($msgAnimateTime, function ()
    {
        $(this).text($msgText).fadeIn($msgAnimateTime, function ()
        {
            $iconTag.height($divTag.height()); // line I'm interested in
        });
    });
},

changeMessage: function ($divTag, $iconTag, $textTag, $divClass, $msgText)
{
    var $msgShowTime = 5000;
    var $msgOld = $divTag.text();
    MyNamespace.fadeMessage($textTag, $msgText, $divTag, $iconTag);

    $divTag.addClass($divClass);
    setTimeout(function ()
    {
        MyNamespace.fadeMessage($textTag, $msgOld, $divTag, $iconTag);
        $divTag.removeClass($divClass);
    }, $msgShowTime);
}

如何更改提到的行，以便在淡入淡出动画完成时，$ iconTag立即更改为$ divTag.height？如图所示使用它太慢了。

基本上，我想要的是$divTag.height === $iconTag.height

请参阅此JSFiddle

Answer 1

怎么样？

#text-login-msg {
  display: block;
  height: 100%;
}

Answer 2

我最后添加了这个：

#text-login-msg 
{
    display: flex;
}

并更改消息的显示方式：

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag)
{
    $msgId.text($msgText);
    $iconTag.css("line-height", $divTag.height() + "px");
},

单独由transition: all ease-in-out提供的动画比由.fadeIn和.fadeOut

完成的延迟动画更好

请参阅updated fiddle