중첩 된 요소의 높이를 포함하는 요소의 높이를 설정하는 Jquery

Question

상당히 간단한 문제라고 생각하지만, 그저 내 머리를 감쌀 수 없으며 jQuery와 너무 좋아 보이지 않습니다. 나는 내부에 div가있다. 기사의 높이는 내용에 따라 다릅니다 (블로그 게시물이므로 일부는 짧고, 일부는 길다). 내 사업부는 그것이 중첩 된 문서의 높이를 일치시킬

HTML :. 내가 그 코드가 생각

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

: 다음

<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를 시도 정확하지만 jQuery에서별로 좋지 않을 수도 있습니다.

그리고 이것이 중요한지는 모르겠지만 한 번에 여러 개의 posthomes와 ColorBarlefts가있을 것입니다.

*** 편집, 나는 붉은 구불 구불 한 상자가있는 줄을 원하는 = PostHome

클래스 ID = PostHome을 변경합니다.

Answer 1

다른 방법은 div를 추가하는 대신 기사에 bg 이미지로 색상 막대를 추가하는 것입니다. 그리고 필요한 경우, 색상 막대의 너비와 동일한 채우기를 기사에 제공하십시오.

또 다른 옵션은 div가 기사 내의 모든 콘텐츠에 대한 래퍼로 작동하도록하고 div에 색상 막대 (bg 이미지 및 선택적 왼쪽 패딩)를 추가하는 것입니다.

두 경우 모두 bg 이미지는 jQuery의 도움없이 자연스럽게 높이가 보장되는 요소에 적용됩니다. 이것은 jQuery를 사용하여 높이를 업데이트 할 필요가 없기 때문에 페이지가 열려있을 때 컨텐츠의 높이가 변경 될 가능성이있는 경우 특히 유용합니다.

편집 :

내가 3 개 컨테이너와 기사가 위 아래의 내용과는 별도의 용기에있는 경우에만 CSS 전용 솔루션 (즉, jQuery를/자바 스크립트를 필요로하지 않는다)이 생각 개별적으로 페이지 중앙에 수평으로 배치됩니다. 이 경우, 기사의 컨테이너는 왼쪽에 bg 이미지를 가질 수 있고 기사는 고정 된 너비와 수평 중심을 부여받을 수 있습니다. 이렇게하면 jQuery에 대한 필요성을 피할 수 있고 절대 위치 지정 (레이아웃의 흐름을 벗어나는 컨텐츠를 차지할 필요가 없음)이 필요하지 않으며 페이지가 열려있을 때 컨텐츠가 변경되는 경우 높이를 업데이트 할 필요가 없습니다.

그렇지 않으면 다시 사각형으로 바뀌고 색상 바 div에 적절한 높이를 설정하기위한 올바른 jQuery 코드를 찾습니다. 기사 콘텐츠가 동적으로 변경되면 높이를 다시 적용하십시오.

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

Answer 2

이 시도 : 여러 .PostHome 객체가있는 경우

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

, 당신은 첫 번째 하나를 목표로하고 싶은, 다음을 수행하십시오

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

을 나는 높이 대신 innerHeight()를 사용하고 있습니다 이 메서드는 상단 및 하단 패딩을 포함하여 요소의 높이를 픽셀 단위로 반환하므로 Height()은 패딩을 사용하여 높이를 반환하지 않습니다.

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

또는 당신은 단순히 당신의 스타일에서 .. 이것에 대한 CSS를 사용할 수 있습니다

.ColorBarLeft { height:100%; } 

그러나 이것은 단지 포함하는 객체가 설정 명시 적으로 높이가있는 경우 PX에서 일을하거나합니다 (Matt Coughlin)이 말한 것처럼