DIV가 전체 테이블 셀을 채우도록 합니다.

DIV가 전체 테이블 셀을 채우도록 합니다.

저는 이 질문을 보고 약간의 검색을 했지만, 지금까지 효과가 없었습니다.저는 이제 2010년이라고 생각합니다. (그 질문들/답변들은 오래된 것이고, 답은 아직 없습니다.) 그리고 우리는 CSS3를 가지고 있습니다! CSS를 사용하여 테이블 셀의 전체 너비와 높이를 채울 div를 얻는 방법이 있습니까?

셀의 폭 및/또는 높이를 미리 알 수 없으며, div의 폭 및 높이를 100%로 설정해도 작동하지 않습니다.

제가 는 세포으로 위치시켜야 이고, , 제가 div가필이제가세포밖에유어떤고요있때소을절이들필문위대기요치가로시으킬적는한요가▁also▁outside,고▁some있때,▁div▁i▁is이문▁cell▁because▁the▁and,position: relative에는 적용되지 않습니다.tds, 그래서 나는 래퍼 디브가 필요합니다.

저는 가짜 높이를 과 높이로 설정해야 했습니다: 상속:

트레이스(어쨌든 무시됨)

그런 다음 td를 설정합니다.

그런 다음 div를 다음으로 설정합니다.

이것은 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>

div height=테이블 셀의 100%는 테이블 자체에 높이 속성이 있을 때만 작동합니다.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td style="height: 100%">
     <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

모두가 자신의 솔루션을 게시하고 있지만 아무 것도 나에게 좋지 않았기 때문에, 여기 내 솔루션이 있습니다(Chrome & Firefox에서 테스트됨).

table { height: 1px; } /* Will be ignored, don't worry. */
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

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

--

편집: 주의해야 할 한 가지, 만약 당신이 TD의 div에 패딩을 적용하고 싶다면,box-sizing: border-box;height: 100%.

다음 코드는 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그리고.height100%하지만 효과가 없었습니다. 그래서 저는 그것을 무시하는 어떤 다른 규칙이 있다는 것을 의심하게 됩니다.너비/높이 규칙이 실제로 적용되고 있는지 Chrome 또는 Firebug에서 계산된 스타일을 확인했습니까?

편집

내가 얼마나 어리석은지!div텍스트에 맞게 크기를 조정했습니다.td당신은 크롬에서 이것을 고칠 수 있습니다.div display:inline-blockIE에서는 작동하지 않습니다.그게 더 까다롭다는 것을 증명합니다...

이 장소의 대부분의 해결책이 틀리기 때문에 최고의 답은 문제를 해결하지도 못하고 선택한 답이 작동하지도 않습니다.

가능한 한 빠른 방법으로 문제를 해결하려면 다음과 같이 설정합니다.table에서 지까높이까지fit-content그자리의 table-row에서 지까높이까지100%그리고 당신은 끝났습니다.

Firefox, Chrome 및 Edge에서 작동합니다.

예:

<table style="height:fit-content">
    <tr style="height:100%">
        <td>
            <div style="height:100%"></div>
        </td>
    </tr>
</table>

셀 안에 수라면, " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "<td>그 자체가 배경색이고 CSS 경계 간격 속성을 사용하여 셀 사이의 여백을 만듭니다.

그러나 100% 높이 디브가 정말로 필요한 경우, 여기 있는 다른 사람들이 언급한 것처럼 고정 높이를 할당해야 합니다.<table>Javascript 입니다.

한다면<table> <tr> <td> <div>모두가 가지고 있는height: 100%; browserset의 셀 .

7,8는 를 처리하기 에 (IE 7, 8, 9) 를 처리합니다.position:relative테이블 셀에서 정확하게 그리고 파이어폭스만 틀리게, 당신의 최선의 방법은 자바스크립트 심을 사용하는 것입니다.하나의 실패한 브라우저에 대해 DOM을 변경할 필요가 없습니다.사람들은 IE가 무언가 잘못되고 다른 브라우저들이 그것을 맞출 때 항상 심을 사용합니다.

여기 모든 코드에 주석이 달린 스니펫이 있습니다.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();
    }
});

며칠 동안 검색한 후에 저는 이 문제에 대한 가능한 해결책을 찾았습니다.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

스페인어:Eltruco es stable cer la Tabla, El Tryel TD 높이: 100%에스토로하스 호환 con FireFoxy Chrome.Internet Explorer 무시라에소, poloque ponemos la etceta TD como block.데스타포마 익스플로러 시토마 라 알투라 막시마.

영어 설명: 코드 주석 내

실험적인 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>

저는 댓글을 달 정도의 명성이 없기 때문에, @Madeorsk와 @Saadat의 접근 방식을 약간 수정하여 결합한 완벽한 크로스 브라우저 솔루션을 추가하고 싶습니다! (2020년 2월 10일 기준으로 크롬, 파이어폭스, 사파리, IE, 엣지에서 테스트됨)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

하지만 저와 같은 경우에는 수직 정렬을 제어하는 것보다 Flexbox를 사용하는 것이 경우에는 다음과 같은 경우에는 다음과 같이 하십시오.

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

네, 아무도 이것을 언급하지 않아서 저는 이 속임수를 게시하기로 했습니다.

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

오버플로: 셀 내 컨테이너 div에서 auto는 나를 위해 트릭을 합니다.이것이 없으면 디브는 전체 높이를 사용하지 않습니다.

높이: 내부 div에 대해 100% 작동하려면 상위 td에 대한 높이를 설정해야 합니다.저의 경우 높이: 100%를 사용하여 작동했습니다.이것은 안쪽 디브 높이를 늘리게 한 반면, 테이블의 다른 요소들은 td가 너무 커지는 것을 허용하지 않았습니다.물론 100%가 아닌 다른 값을 사용할 수 있습니다.

또한 테이블 셀의 높이를 고정하여 내용에 따라 커지지 않도록 하려면(내부 div 스크롤 또는 숨기기 오버플로), 즉 일부 js 트릭을 수행할 수밖에 없습니다.상위 td의 높이는 상대적이지 않은 단위(%가 아님)로 지정해야 합니다.그리고 당신은 아마도 js를 사용하여 그 높이를 계산할 수 밖에 없을 것입니다.또한 테이블 레이아웃이 필요합니다. 테이블 요소에 고정 스타일 세트

비슷한 문제가 자주 발생하고 항상 사용합니다.table-layout: fixed;에서table요소와height: 100%;안쪽 점에

궁극적으로 모든 브라우저와 모든 DocTypes/브라우저 렌더링 모드에서 jQuery를 사용하는 것 외에는 작동할 만한 것을 찾을 수 없었습니다.이것이 제가 생각해낸 것입니다.
행 범위도 고려합니다.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

IE11(엣지 모드), FF42, Chrome44+에서 테스트됨.내포된 테이블로 테스트하지 않습니다.

당신은 그렇게 할 수 있습니다.

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

파티에 조금 늦었지만 제 해결책은 이렇습니다.

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

배치된 요소와 해당 요소의 상위 요소에 너비와 높이가 없는 경우 설정합니다.

padding: 0;

그것의 아버지 요소에서,

이것은 권장되지 않을 수 있습니다.

만약 당신의 div가 텍스트를 포함하지 않고 균일한 배경을 가지고 있다면, 저는 해결책을 찾았습니다.

display: 'list-item'

원하는 높이와 너비를 Div에 제공하지만 목록 항목 글머리표가 있다는 큰 단점이 있습니다.디브의 배경색이 균일하기 때문에 저는 그 스타일로 총알을 없앴습니다.

list-style-position: 'inside',
color: *background-color*,

테이블 셀이 원하는 크기라면 이 css 클래스를 추가하여 div에 할당하면 됩니다.

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

테이블 셀이 상위 셀도 채우도록 하려면 클래스도 테이블 셀에 할당합니다.

이 해킹은 나에게 효과가 있습니다: 그냥 div에 공간을 넣으십시오(그러면 td의 모든 높이가 필요합니다).

<td>
   <div>
     &nbsp;
     <!-- some optional content filled by vuejs, angular or what you want -->
   </div>
</td>

당신이 무엇을 하고 싶은지 잘 모르겠지만, 당신은 이것을 시도해 볼 수 있습니다.

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

다음과 같이 하면 됩니다.상위 셀의 높이를 설정해야 합니다.https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

사용해 보십시오.

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

저는 자바스크립트를 사용하는 것이 가장 좋은 해결책이라고 생각합니다.

하지만 저는 당신이 이것을 해야만 요소들을 위치시키는 문제를 해결할 수 있을지 확신할 수 없습니다.<td>를 위해 다음과 할 수 .이를 위해 다음과 같은 작업을 수행할 수 있습니다.

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

물론 인라인이 아니라 클래스와 ID를 사용합니다.

나는 여기서 <td> 내부의 <div>에 대한 오래된 CSS 트릭을 보지 않습니다.따라서 저는 단순하게 너비에 대해 최소 값을 설정하지만 최소 너비에 대해 필요한 것을 설정할 수 있습니다.예:

<div style="width: 3px; min-width: 99%;">

이 경우 td의 폭은 당신에게 달려 있습니다.

입니다.<td>

코드의 첫 번째 줄을 삭제하면 수정할 수 있습니다...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

에서 일부 파에서는이형식내이를부 100% 사용허것않의 내부 100하는 것을 입니다.<td>하지만 이 라인을 삭제하면 차체가 배경을 높이 100%, 너비 100%로 확장하지 못합니다. 그래서 저는 이것을 발견했습니다.DOCTYPE이 문제를 해 줍니다.

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

몸로 확장할 수 , 를 모두 "DOCYPE"에 수 .<td>

언급URL : https://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell