[css] DIV가 전체 테이블 셀을 채우도록하십시오.

Program / 글쓴이

나는 이 질문을 보았다 하고 조금 인터넷 검색 ,하지만 아무것도 지금까지 근무하지 않았다. 나는 지금 2010 년이라고 생각합니다 (질문과 대답은 오래되었고 대답이 없습니다) CSS3가 있습니다! CSS를 사용하여 전체 표 셀의 너비와 높이를 채우기 위해 div를 얻는 방법이 있습니까?

셀의 너비 및 / 또는 높이가 미리 무엇인지 알 수 없으며 div의 너비 및 높이를 100 %로 설정하면 작동하지 않습니다.

또한 div가 필요한 이유는 셀 외부에 일부 요소를 절대적으로 배치 position: relative해야하고 tds 에는 적용되지 않기 때문에 래퍼 div가 필요하기 때문입니다.

답변

다음 코드는 IE 8, IE 8의 IE 7 호환 모드 및 Chrome (다른 곳에서는 테스트되지 않음)에서 작동합니다.

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

당신은 해당 설정을 원래의 질문에 말했다 width과 height에 100%내가 그것을 무시 다른 규칙이 있음을 의심하게하는,하지만 일을하지 않았다. 너비 / 높이 규칙이 실제로 적용되는지 확인하기 위해 Chrome 또는 Firebug에서 계산 된 스타일을 확인 했습니까?

편집하다

내가 얼마나 어리석은가! 의 div크기가 텍스트가 아닌 크기로 조정되었습니다 td. 를 만들어 Chrome에서이 문제를 해결할 수 div display:inline-block있지만 IE에서는 작동하지 않습니다. 까다로워지고 있습니다 …

답변

테이블 셀의 div height = 100 %는 테이블에 높이 속성이있는 경우에만 작동합니다.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

FireFox의 UPD 에서는 height=100%값을 상위 TD요소로 설정해야합니다

답변

나는 높이를 가짜 높이 로 설정 해야했다 .<tr><td>s

tr은 height: 1px(어쨌든 무시됩니다)

그런 다음 td를 설정하십시오 height: inherit

그런 다음 div를 height: 100%

이것은 IE edge 및 Chrome에서 나를 위해 일했습니다.

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

스 니펫 확장

답변

표 셀 안에 100 % div를 원하는 이유가 배경색을 전체 높이로 확장 할 수는 있지만 여전히 셀 사이에 간격을 둘 수 있다면 <td>배경색을 지정하고 CSS를 사용할 수 있습니다 셀 간 여백을 만드는 경계 간격 속성입니다.

그러나 100 % 높이 div가 정말로 필요하다면 다른 사람들이 언급했듯이 고정 높이를 지정 <table>하거나 Javascript를 사용해야합니다.

답변

그래서 모두가 솔루션을 게시하고 나에게 좋지 않은 것이 있기 때문에 여기에 내 Chrome (Firefox 및 Firefox에서 테스트 됨)이 있습니다.

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

피들 : https://jsfiddle.net/nh6g5fzv/

답변

IE 7, 8 및 9를 포함한 다른 모든 브라우저 position:relative는 테이블 셀에서 올바르게 처리하고 Firefox 만 잘못 인식하므로 JavaScript shim을 사용하는 것이 가장 좋습니다. 하나의 실패한 브라우저에 대해 DOM을 변경할 필요가 없습니다. 사람들은 IE가 무언가 잘못되고 다른 모든 브라우저가 올바르게 얻을 때 항상 shim을 사용합니다.

다음은 모든 코드에 주석이 달린 스 니펫입니다. JavaScript, HTML 및 CSS는 필자의 예제에서 반응 형 웹 디자인 방식을 사용하지만 원하지 않는 경우에는 필요하지 않습니다. 반응 형은 브라우저 너비에 맞게 조정됩니다.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

다음은 코드 자체이지만 컨텍스트가 없으면 의미가 없으므로 위의 jsfiddle URL을 방문하십시오. 전체 스 니펫에는 CSS와 Javascript 모두에 많은 주석이 있습니다.

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

답변

나는을 사용하여 해결책을 제안한다 실험 셀의 내용 요소가 부모 셀을 세로로 채울 수있는 테이블 레이아웃 을 시뮬레이션 하는 Flexbox :

데모

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }
<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

스 니펫 확장