0

我认为这是一个相当简单的问题，但我无法理解它，而且我对 jQuery 不太了解。我在 . 文章高度因内容而异（它是一篇博文，所以有些短，有些长）。我希望我的 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

在此处输入图像描述

我想要红色波浪形盒子所在的酒吧。

4

2 回答 2

0

尝试这个：

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

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

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

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

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

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

.ColorBarLeft { height:100%; }

但这只有在包含对象具有明确的高度设置时才有效，以 px 或 em 等为单位，正如 Matt Coughlin 所说。

于 2012-07-02T00:41:06.663 回答
0

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

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

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

编辑：

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

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

$('.ColorBarLeft').height($('.PostHome').height());
于 2012-07-02T00:42:24.290 回答