Question

I think it is a fairly simple problem, but I just cant wrap my head around it and I am not too great with jQuery. I have a div inside of an . The articles height is variable depending on the content (Its a blog post, so some are short, some are long). I want my div to match the height of the article it is nested in.

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>

And then I tried some jQuery like so:

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

I think that code is correct, but it could be off, again, not very good at jQuery.

And I don’t know if this is important but there are going to be multiple posthomes and ColorBarlefts on the page at a time.

***EDIT, changes id=PostHome to class=PostHome

I want the bar where the red squiggly box is.

Answer 1

An alternative is to add the color bar as a bg image to the article, rather than by adding a div. And if needed, give the article left padding equal to the width of the color bar.

Another option is to have the div act as a wrapper around all of the content inside the article, and add the color bar (bg image and optional left padding) to the div.

In both cases, the bg image will be applied to an element that’s naturally guaranteed to have the correct height, without any assistance from jQuery. This is especially useful if the content is likely to change in height while the page is open, as it doesn’t require updating the height using jQuery.

Edit:

I think the only CSS-only solution (that doesn’t require jQuery/JavaScript) is if the article is in a separate container from the content above and below, with all 3 containers separately horizontally centered in the page. In that case, the container for the article could have a bg image on the left, and then the article could be given a fixed width and horizontally centered. This avoids the needs for jQuery, doesn’t require absolute positioning (which would take the content out of the flow of the layout), and doesn’t require updating the height if the content changes while the page is open.

Otherwise, it’s back to square one and just finding the right jQuery code to set the appropriate height for the color bar div. Just be sure to reapply the height if the article content dynamically changes.

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