Jquery将嵌套元素的高度设置为其包含元素的高度

Question

我认为这是一个相当简单的问题，但我无法绕过它并且我对jQuery不太了解。我有一个div。文章的高度根据内容而变化（它是博客文章，所以有些很短，有些很长）。我希望我的div与它嵌套的文章的高度相匹配。

HTML：

    <article class="PostHome">
    <div class="ColorBarLeft"></div>
        <header>
            <h3>@Html.DisplayFor(modelItem => item.Title)</h3>
            <small>@Html.DisplayFor(modelItem => item.DateCreated)</small>
        </header>

        <section id="PostContent">
            @Html.DisplayFor(modelItem => item.Content)
        </section>

        <section id ="PostTags">
            @Html.Label("Tags:")
            @Html.DisplayFor(modelItem => item.Tags)
        </section>

        @Html.ActionLink("View Full Post", "Post", new { blogTitle = item.Title.Replace(" ", "-"), id = item.Id}, null)
    </article>

然后我尝试了一些jQuery：

$(document).ready(function () {
$(".ColorBarLeft").height(function () {
    var height = $(this).height()
    $('.PostHome').height(height);
})
});

我认为代码是正确的，但它可能会再次关闭jQuery。

我不知道这是否重要，但一次会在页面上有多个posthomes和ColorBarlefts。

***编辑，将id = PostHome更改为class = PostHome

我想要红色波浪形盒子的栏。

Answer 1

试试这个：

 $(document).ready(function () {
   $('.ColorBarLeft').height( $(".PostHome").innerHeight() + 'px' );
 });

如果有多个.PostHome个对象，并且您希望仅定位第一个对象，请执行以下操作：

 $(document).ready(function () {
   $('.ColorBarLeft').height( $(".PostHome:eq(0)").innerHeight() + 'px' );
 });

我使用的是innerHeight()而不是Height，因为此方法返回元素的高度，包括顶部和底部填充（以像素为单位），而Height()不会返回带填充的高度。< / p>

http://api.jquery.com/innerHeight/

或者您可以简单地使用CSS ..在样式表中：

.ColorBarLeft { height:100%; }

但是这只有在包含对象具有明确的高度设置，px或em等时才会起作用，正如Matt Coughlin所说的那样。

Answer 2

另一种方法是将颜色条添加为文章的bg图像，而不是添加div。如果需要，请将文章左侧填充等于颜色条的宽度。

另一种选择是让div作为文章内部所有内容的包装，并将颜色条（bg图像和可选的左边填充）添加到div。

在这两种情况下，bg图像都将应用于一个自然保证具有正确高度的元素，而无需jQuery的任何帮助。如果内容在页面打开时可能会发生高度变化，这一点尤其有用，因为它不需要使用jQuery更新高度。

修改

我认为唯一的CSS解决方案（不需要jQuery / JavaScript）是因为文章与上面和下面的内容位于一个单独的容器中，所有3个容器分别在页面中水平居中。在这种情况下，文章的容器可以在左边有一个bg图像，然后文章可以给定一个固定的宽度并水平居中。这避免了对jQuery的需求，不需要绝对定位（这会将内容从布局流中取出），并且如果在页面打开时内容发生更改，则不需要更新高度。

否则，它回到原点，只是找到正确的jQuery代码来设置颜色条div的适当高度。如果文章内容动态变化，请务必重新申请高度。

$('.ColorBarLeft').height($('.PostHome').height());