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
我想去的地方的红色波浪框是吧。
另一种方法是将颜色条作为bg图像添加到文章中,而不是添加div。如果需要,将文章左边的填充等于颜色条的宽度。
另一种选择是让div充当文章中所有内容的包装,并将颜色条(bg图像和可选左边距)添加到div。
在这两种情况下,bg图像都会应用于自然保证具有正确高度的元素,而无需jQuery的任何帮助。如果页面处于打开状态时内容的高度可能发生变化,这一点特别有用,因为它不需要使用jQuery更新高度。
编辑:
我认为唯一的唯一CSS-溶液(不需要的jQuery/JavaScript的)是,如果该制品是在从上方和下方的内容的单独的容器,其中所有3升的容器分别在页面中水平居中。在这种情况下,物品的容器可以在左侧有一个bg图像,然后可以给该物品固定的宽度和水平居中。这样可以避免jQuery的需求,不需要绝对定位(这将使内容脱离布局流),并且在页面打开时内容更改时不需要更新高度。
否则,它回到原点,只是找到正确的jQuery代码来为颜色条div设置合适的高度。只要文章内容动态变化,请确保重新应用高度。
$('.ColorBarLeft').height($('.PostHome').height());
我在想那样的事情,但我不确定它在我的特殊情况下会如何工作。 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或正如马特库格林所说的那样。
jQuery的半工作是这样的。其设置的高度,但它是采取第一PostHome高度,并为后续所有职位设置它。 – ledgeJumper
你有更多的对象与'id =“PostHome”'? –
是的,每页大概有五个。而我将它改为一个类而不是ID – ledgeJumper
好像你正在做它周围posthome'的'高度匹配'colorbarleft' – elclanrs
其他方式这里有2个独立的问题:高度和彩色条的位置。你是否已经有了解决方案?酒吧如何定位可能会决定哪些选项可用于高度。 –
对于这个职位,我所做的只是将div的CSS设置为:position:absolute;左:0 ;.对于高度我不能让它匹配,这就是为什么我通过jQuery可以做到这一点。如果我使用像你所说的图像,它可以正常工作,但只有当我将它放在文章元素 – ledgeJumper