<div> 채우기 <td> 높이 만드는 방법

StackOverflow에 대한 여러 게시물을 살펴 보았지만이 간단한 질문에 대한 답변을 찾지 못했습니다.

다음과 같은 HTML 구조가 있습니다.

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

내가 필요한 것은 div의 높이를 채우는 td것이므로 div의 배경 (아이콘)을 .NET의 오른쪽 하단 모서리에 배치 할 수 td있습니다.

내가 그것에 대해 어떻게 제안합니까?

TD에 1px의 높이를 지정하면 자식 div에는 %를 계산할 높이가있는 부모가 있습니다. 콘텐츠가 1px보다 크므로 div와 마찬가지로 td가 자동으로 커집니다. 일종의 쓰레기 해킹이지만 작동 할 것입니다.

CSS 높이 : 100 %는 요소의 부모에 명시 적으로 정의 된 높이가있는 경우에만 작동합니다. 예를 들어, 이것은 예상대로 작동합니다.

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

당신이처럼 보인다 때문에 <td>당신이 그렇게 같은 절대 위치 이미지 오른쪽 하단 아이콘을 추가 어떤 경우, 변수 높이가 될 것입니다 :

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

다음과 같이 표 셀 마크 업을 사용합니다.

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

편집 : jQuery를 사용하여 div의 높이 설정

<div>를의 자식으로 유지하면 <td>이 jQuery 조각이 높이를 올바르게 설정합니다.

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

div를 부동으로 만들 수 있습니다.

.thatSetsABackgroundWithAnIcon{

    float:left;
}

또는 인라인 블록을 사용하십시오.

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

인라인 블록 방법의 작동 예 :

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

정말 JS로해야합니다. 여기에 해결책이 있습니다. 클래스 이름을 사용하지 않았지만 "full-height"라는 td 클래스 이름 내에서 div를 호출했습니다. :-) 분명히 jQuery를 사용했습니다. 이것은 jQuery (document) .ready (function () {setFullHeights ();}); 또한 이미지가있는 경우 다음과 같이 먼저 이미지를 반복해야합니다.

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

그리고 대신 docReady에서 loadedFullHeights ()를 호출하고 싶을 것입니다. 이것은 실제로 내가 만일을 대비하여 사용하게 된 것입니다. 당신이 알고있는 앞서 생각해야합니다!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

이 질문은 이미 여기에 답변되어 있습니다 . 와 용기 height: 100%모두에 넣으십시오 .divtd

<td> 자체의 배경 이미지를 수정합니다.

또는 div에 CSS를 적용하십시오.

.thatSetsABackgroundWithAnIcon{
    height:100%;
}