div를 포함하는 td의 높이를 일치시키는 방법은 무엇입니까?

테이블의 행을 따라 배치 된 세 개의 "패널"이 있습니다. 하나는 다른 두 개보다 크고 세 개의 패널 모두가 가장 높은 패널의 높이와 일치하도록하고 싶습니다. 나는 높이를 가진 divs의 스타일링을 시도했다 : 100 %, 그러나 포함하는 tds가 성장함에도 불구하고 짧은 패널은 짧게 유지된다.div를 포함하는 td의 높이를 일치시키는 방법은 무엇입니까?

내 HTML이 JSF에 의해 생성되었으므로 양식에 대한 제어가 제한되어 있지만 스타일을 수정할 수 있습니다. 아래에 생성 된 코드의 단순화 된 버전을 만들었습니다. 같은 문제가 IE8과 Firefox에서 발생합니다. 그러나 IE8은 짧은 패널을 td의 상단에 수직으로 렌더링하고 Firefox는 중간에 렌더링합니다. 트릭을 어떻게해야 이러한

<html> 
<head> 
    <title>Test Table</title> 
    <style TYPE="text/css"> 
     td {border: 1px solid red; padding: 1px;} 
     .panel {border: 1px solid blue; padding: 1px;height:100%} 
     .panel-header{background-color: green; color: white;} 
     .panel-body {border: 1px solid green; padding: 1px; height:100%;} 
    </style> 
</head> 
<body> 
    <h1>Test Table</h1> 
    <table width="100%"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="panel" style="height:200px;"> 
        <div class="panel-header"> 
        Header One 
        </div> 
        <div class="panel-body"> 
        Body One 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel" style="height:100%;"> 
        <div class="panel-header"> 
        Header Two 
        </div> 
        <div class="panel-body"> 
        Body Two 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel"> 
        <div class="panel-header"> 
        Header Three 
        </div> 
        <div class="panel-body"> 
        Body Three 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
<html>

출처

2011-02-07 Greg Charles

jQuery를 사용하여 내 게시물에이 작업을 추가했습니다. 도움이되기를 바랍니다! –

절대 위치 지정으로 할 수 있습니다. [이 답변] (http://stackoverflow.com/a/33943557/1677209)을보십시오. – T30

5 년이 지난 지금 실제 페이지를 테스트 할 수는 없지만 피들을 시험해보기 만하면됩니다. 미안하지만 전혀 작동하지 않습니다. 내가 직면 한 문제를 오해했을 수도 있습니다. 어쨌든 Richard가 제안한 jQuery 솔루션은 잘 작동했습니다. –

명시 적으로 tds (또는 테이블)의 높이를 지정하지 않고 높이를 100 %로 설정할 수 있다고 생각하지 않습니다. height:100%이 적용되기 전에 상위 요소에 명시적인 높이를 지정해야하는 것으로 보입니다. 아마도 div 컨테이너 대신 td 태그 자체에 스타일을 수정할 수 있습니까?

중간 대신 div를 정렬하는 것이 도움이된다면, 나는 그것을 수행하는 방법에 대한 예제를 here (vertical-align:top;을 td 태그에 추가)했습니다. div를 사용하는 예제를 만들었지 만 폼에 대한 제어권이 제한적이라고 말한 것을 알고 있습니다.

한 요소의 최대 높이를 알고있는 경우 표 또는 표 셀을 높이 (예 : height:200px;)로 설정하면 div에 100 % 영향을 주어야합니다.

당신이 jQuery를 사용하여 부작용없는 경우 편집, 난 당신이 무엇을 필요로 할 내 예를 here을 업데이트했습니다.

출처

2011-02-07 20:39:39

Drackir은 정확하며, 테이블 TD 요소는 높이 값 자체를 지정하지 않으므로 높이의 100 %를 요구하는 하위 요소는이를 계산할 수 없습니다 .Drackir에 따르면 TD의 높이를 수동으로 설정할 수 있습니다 , 또는 ... 당신은 높이를 100 %로 지정하고, DIV의 높이를 100 %로 지정하고, 테이블의 높이를 지정할 수 있습니다. 또는 테이블에 100 % 높이를 적용 할 수도 있습니다. 테이블은 상위 요소에서 높이 값을 가져옵니다. 이상적이지는 않지만 모든 DIV가 지정된 DIV에 더 많은 콘텐츠를 추가 할 때 동일한 높이가 될 것입니다. – Nick

예, 전체 테이블이 더 커지도록하거나 테이블이 하나의 행 밖에 없는데도 실제 테이블에는 여러 행이 있습니다. td 요소가 크기를 조정하는 방법을 알고 있지만 포함 된 div에 해당 정보를 전달할 수는 없습니다. 크기 조정을 수행하고 패널의 onres에 첨부 할 수있는 스크립트로 작업 할 것입니다. ize 이벤트. 내가 작동하도록 할 수 있다면 여기에 게시 할 것입니다. (Big if!) –

@Greg Charles : jQuery 사용에 불리한 점이 없다면, 내 게시물에 원하는 예제를 추가했습니다. –

height=100%; 
or 
height=inherit;

하나 :

출처

2011-02-07 20:15:48 Milaan

OP에는 이미 'height : 100 %'가 있으며 다음과 같이 표시됩니다. "높이가 100 인 div를 스타일링했지만 너무 짧은 패널은 짧아졌습니다. 또한 CSS가되어야하는 경우 등호 대신 콜론을 사용해야합니다. –

어쩌면 나는 질문을 이해할 수 없다 :) 그러나 상속은 그때 작동해야한다. 아니면 어쩌면 그는 TD 스타일을 지정해야한다. 그리고 네, ':'을 사용해야합니다. 그러나 나는 타이핑을 빨리하고 있었다 : $ Sorry :) – Milaan

나는 너에게 알려주고 있었다. 콜론을 추가하기 위해 답을 편집 할 수 있습니다. :) 왼쪽 하단에 수정 링크가 있습니다. –

내 솔루션 : http://jsfiddle.net/k6Dam/2/

제거 인라인 스타일 (그렇게 할 수 있습니다 희망)와 최소 높이 패널의 설정 200px까지.

출처

2011-02-07 20:28:27 gearsdigital

나는 하나의 시체가 다른 시체의 높이를 지나칠 때 문제가 있다고 생각한다. 이 솔루션은 [여기] (http://jsfiddle.net/Drackir/k6Dam/3/)에서 확인할 수 없습니다. –

@Drackir 물론이 마크 업으로 어떤 제한없이 그렇게 할 수는 없습니다. 그는 아마도 첫 번째 요소의 높이를 jQuery/Javascript로 읽고 주어진 값에 따라 높이를 설정할 수 있습니다. – gearsdigital

예. 불행히도 이것이 유일한 해결책 일 수 있습니다. : –

div를 포함하는 td의 높이를 일치시키는 방법은 무엇입니까?

답변

관련 문제