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

我认为这是一个相当简单的问题，但我只是不能将自己的头包裹起来，而且我对jQuery并不太满意。我在里面有一个div。文章的高度根据内容而变化（它是一篇博文，所以有些文章很短，有些很长）。我希望我的DIV相匹配的文章被嵌套在高度Jquery将嵌套元素的高度设置为其包含元素的高度

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类= PostHome

enter image description here

我想去的地方的红色波浪框是吧。

来源

2012-07-02 ledgeJumper

好像你正在做它周围posthome'的'高度匹配'colorbarleft' – elclanrs

其他方式这里有2个独立的问题：高度和彩色条的位置。你是否已经有了解决方案？酒吧如何定位可能会决定哪些选项可用于高度。 –

对于这个职位，我所做的只是将div的CSS设置为：position：absolute;左：0 ;.对于高度我不能让它匹配，这就是为什么我通过jQuery可以做到这一点。如果我使用像你所说的图像，它可以正常工作，但只有当我将它放在文章元素 – ledgeJumper

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

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

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

编辑：

我认为唯一的唯一CSS-溶液（不需要的jQuery/JavaScript的）是，如果该制品是在从上方和下方的内容的单独的容器，其中所有3升的容器分别在页面中水平居中。在这种情况下，物品的容器可以在左侧有一个bg图像，然后可以给该物品固定的宽度和水平居中。这样可以避免jQuery的需求，不需要绝对定位（这将使内容脱离布局流），并且在页面打开时内容更改时不需要更新高度。

否则，它回到原点，只是找到正确的jQuery代码来为颜色条div设置合适的高度。只要文章内容动态变化，请确保重新应用高度。

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

来源

2012-07-02 00:42:24

我在想那样的事情，但我不确定它在我的特殊情况下会如何工作。 PostHomes坐在我的页面的中心，我想要做的是有一个20px宽的彩色条坐在绝对位置左侧。如果这是有道理的.. – ledgeJumper

你想让彩色条位于文章的左边缘，还是位于浏览器视口的左边缘？ –

如果您想让彩色条位于文章的左侧边缘，请创建一幅20px x 1px的黄色PNG图像，垂直平铺，将其放置在左侧，并将其添加到文章中：'background：url（bar。 png）repeat-y left top;'。你将有一个20px宽的彩条，占据了整个高度。如果你不想让内容横向重叠（就好像彩色条是一个单独的列），给文章'padding-left：20px;' –

试试这个：

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

如果有多个.PostHome对象，你想只针对第一个，那么这样做：

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

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

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

或者你可以简单地使用CSS这个..在你的样式表：

.ColorBarLeft { height:100%; }

但这是否包含对象有一个明确的高度设置为它只会工作，在PX或正如马特库格林所说的那样。

来源

2012-07-02 00:41:06

jQuery的半工作是这样的。其设置的高度，但它是采取第一PostHome高度，并为后续所有职位设置它。 – ledgeJumper

你有更多的对象与'id =“PostHome”'？ –

是的，每页大概有五个。而我将它改为一个类而不是ID – ledgeJumper

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

回答

相关问题