Tạo một DIV điền vào toàn bộ một ô của bảng

Tôi đã thấy câu hỏi này và googled một chút , nhưng cho đến nay không có gì đã làm việc. Tôi cho rằng bây giờ là năm 2010 (những câu hỏi / câu trả lời đó đã cũ và, chưa được trả lời) và chúng tôi có CSS3! Có cách nào để có được một div để lấp đầy toàn bộ chiều rộng và chiều cao của ô của bảng bằng CSS không?

Tôi không biết chiều rộng và / hoặc chiều cao của ô sẽ đi trước thời đại và đặt chiều rộng và chiều cao của div thành 100% không hoạt động.

Ngoài ra, lý do tôi cần div là vì tôi cần định vị hoàn toàn một số phần tử bên ngoài ô và position: relativekhông áp dụng cho tds, vì vậy tôi cần một div trình bao bọc.

Đoạn mã sau hoạt động trên IE 8, chế độ tương thích IE 7 của IE 8 và Chrome (không được thử nghiệm ở nơi khác):

<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>

Bạn nói trong câu hỏi ban đầu của bạn rằng cài đặt widthvà heightđể 100%không làm việc, tuy nhiên, điều này khiến tôi nghi ngờ rằng có một số quy tắc khác trọng nó. Bạn đã kiểm tra kiểu tính toán trong Chrome hoặc Fireorms để xem liệu quy tắc chiều rộng / chiều cao có thực sự được áp dụng không?

Biên tập

Tôi thật ngốc nghếch làm sao! Các divđã được định cỡ đến các văn bản, chứ không phải đến td. Bạn có thể sửa lỗi này trên Chrome bằng cách tạo div display:inline-block, nhưng nó không hoạt động trên IE. Điều đó chứng tỏ phức tạp hơn ...

div height = 100% trong ô bảng sẽ chỉ hoạt động khi bảng có thuộc tính height.

<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>

CẬP NHẬT trong FireFox, bạn cũng nên đặt height=100%giá trị cho TDphần tử cha

Tôi đã phải đặt chiều cao giả thành <tr>và chiều cao: kế thừa cho<td>s

tr có height: 1px(dù sao nó cũng bị bỏ qua)

Sau đó đặt td height: inherit

Sau đó đặt div thành height: 100%

Điều này làm việc cho tôi trong IE edge và 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>

Nếu lý do của bạn muốn có một div 100% trong một ô bảng là có thể có màu nền mở rộng đến toàn bộ chiều cao nhưng vẫn có thể có khoảng cách giữa các ô, bạn có thể <td>tự tạo màu nền và sử dụng CSS thuộc tính khoảng cách biên để tạo lề giữa các ô.

Tuy nhiên, nếu bạn thực sự cần div 100% chiều cao, thì như những người khác ở đây đã đề cập, bạn cần gán chiều cao cố định cho <table>hoặc sử dụng Javascript.

Vì vậy, bởi vì mọi người đều đăng giải pháp của họ và không có gì tốt cho tôi, đây là của tôi (đã được thử nghiệm trên Chrome & Firefox).

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

Câu đố: https://jsfiddle.net/nh6g5fzv/

Vì mọi trình duyệt khác (bao gồm IE 7, 8 và 9) xử lý position:relativechính xác trên một ô của bảng và chỉ Firefox bị sai, nên cách tốt nhất của bạn là sử dụng shim JavaScript. Bạn không cần phải thay đổi DOM cho một trình duyệt bị lỗi. Mọi người sử dụng shims mọi lúc khi IE gặp lỗi và tất cả các trình duyệt khác đều đúng.

Đây là một đoạn với tất cả các mã được chú thích. JavaScript, HTML và CSS sử dụng các thực tiễn thiết kế web đáp ứng trong ví dụ của tôi, nhưng bạn không phải làm thế nếu bạn không muốn. (Responsive có nghĩa là nó thích nghi với chiều rộng trình duyệt của bạn.)

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

Đây là bản thân mã, nhưng nó không có ý nghĩa nếu không có ngữ cảnh, vì vậy hãy truy cập URL jsfiddle ở trên. (Đoạn trích đầy đủ cũng có nhiều nhận xét trong cả CSS và 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();
    }
});

Tôi đề xuất một giải pháp sử dụng thí nghiệm Flexbox để mô phỏng bố cục bảng sẽ cho phép phần tử nội dung của ô điền vào ô chính của nó theo chiều dọc:

Bản giới thiệu

.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>

Sau vài ngày tìm kiếm, tôi đã tìm ra cách khắc phục có thể cho vấn đề này.

 <!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>

Ngôn ngữ Tây Ban Nha: El truco es establecer la Tabla, el TR y el TD chiều cao: 100%. Esto lo hace tương thích với FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como khối. De esta forma Explorer sí toma la altura máxima.

Giải thích bằng tiếng Anh: trong phần bình luận mã

nếu <table> <tr> <td> <div>tất cả đã height: 100%;được đặt, thì div sẽ lấp đầy chiều cao ô động trong tất cả các trình duyệt.

Ok không ai đề cập đến điều này vì vậy tôi đoán tôi sẽ đăng thủ thuật này:

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

tràn: tự động trên div container đó trong ô thực hiện thủ thuật cho tôi. Không có nó, div không sử dụng toàn bộ chiều cao.

Nếu ô bảng là kích thước bạn muốn, chỉ cần thêm lớp css này và gán nó cho div của bạn:

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

Nếu bạn muốn ô bảng cũng điền vào cha, hãy gán cả lớp cho ô bảng. Tôi hy vọng nó sẽ giúp.

hơi muộn để dự tiệc nhưng đây là giải pháp của tôi:

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

Vì tôi không đủ uy tín để đăng bình luận, tôi muốn thêm một giải pháp đa trình duyệt hoàn chỉnh kết hợp các cách tiếp cận của @Madeorsk và @ Saadat với một số sửa đổi nhỏ! (Đã thử nghiệm trên Chrome, Firefox, Safari, IE và Edge kể từ ngày 2/10/2020)

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!
} 

Tuy nhiên, nếu bạn giống tôi, bạn cũng muốn kiểm soát căn chỉnh dọc và trong những trường hợp đó, tôi thích sử dụng flexbox:

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

Tôi nghĩ rằng giải pháp tốt nhất sẽ là sử dụng JavaScript.

Nhưng tôi không chắc chắn rằng bạn cần phải làm điều này để giải quyết vấn đề của bạn về các yếu tố định vị ở <td>bên ngoài tế bào. Cho rằng bạn có thể làm một cái gì đó như thế này:

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

Tất nhiên không phải là nội tuyến, nhưng với các lớp và id.

Để tạo chiều cao: 100% làm việc cho div bên trong, bạn phải đặt chiều cao cho td cha. Đối với trường hợp cụ thể của tôi, nó hoạt động bằng chiều cao: 100%. Điều này làm cho chiều cao div bên trong kéo dài, trong khi các yếu tố khác của bảng không cho phép td trở nên quá lớn. Tất nhiên bạn có thể sử dụng các giá trị khác hơn 100%

Nếu bạn cũng muốn làm cho ô bảng có chiều cao cố định để nó không lớn hơn dựa trên nội dung (để tạo cuộn div bên trong hoặc ẩn tràn), đó là khi bạn không có lựa chọn nào khác ngoài thực hiện một số thủ thuật js. Td cha sẽ cần phải có chiều cao được chỉ định trong một đơn vị không tương đối (không phải%). Và rất có thể bạn sẽ không có lựa chọn nào khác ngoài việc tính chiều cao đó bằng js. Điều này cũng cần bố trí bảng: kiểu cố định cho phần tử bảng

Tôi gặp các vấn đề tương tự thường xuyên và luôn chỉ sử dụng table-layout: fixed;trên tablephần tử và height: 100%;trên div bên trong.

Cuối cùng tôi đã tìm thấy không có gì có thể hoạt động trên tất cả các trình duyệt của tôi và tất cả các chế độ kết xuất trình duyệt / trình duyệt của DocTypes, ngoại trừ việc sử dụng jQuery. Vì vậy, đây là những gì tôi đã đưa ra.
Nó thậm chí còn đưa hàng vào tài khoản.

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);

Đã thử nghiệm trong IE11 (Chế độ cạnh), FF42, Chrome44 +. Không được thử nghiệm với các bảng lồng nhau.

bạn có thể làm như thế:

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

Nếu phần tử định vị và phần tử cha của nó không có chiều rộng và chiều cao, thì hãy đặt

padding: 0;

trong yếu tố cha của nó,

Điều này có lẽ không được khuyến khích.

Tôi đã tìm ra một cách giải quyết có hiệu quả nếu div của bạn không chứa văn bản và có nền tảng thống nhất.

display: 'list-item'

cung cấp cho div chiều cao và chiều rộng mong muốn, nhưng với nhược điểm lớn là có một viên đạn danh sách. Vì div có màu nền đồng nhất nên tôi đã loại bỏ viên đạn với các kiểu đó:

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

Tôi không chắc chắn những gì bạn muốn làm nhưng bạn có thể thử cái này:

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

Sau đây nên làm việc. Bạn phải đặt chiều cao cho ô cha. 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>

Thử cái này:

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

Hãy thử đặt màn hình: khối bảng bên trong một ô

Tôi không xem ở đây một thủ thuật CSS cũ cho < div > bên trong < td >. Do đó tôi nhắc: đơn giản đặt một số giá trị tối thiểu cho chiều rộng , nhưng những gì bạn cần cho chiều rộng tối thiểu . Ví dụ:

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

Các td width 's, trong trường hợp đó, là tùy thuộc vào bạn.

Đây là Giải pháp của tôi để mở rộng 100% chiều cao và 100% chiều rộng trong một html <td>

nếu bạn xóa dòng đầu tiên trong mã của mình, bạn có thể sửa nó ...

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

bởi vì loại tài liệu này không cho phép trong một số tệp sử dụng 100% phần trăm bên trong <td>, nhưng nếu bạn xóa dòng này, cơ thể không mở rộng nền thành 100% chiều cao và 100% chiều rộng, vì vậy tôi thấy điều này DOCTYPEgiải quyết được vấn đề

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

DOCTYPE này cho phép bạn mở rộng nền trong cơ thể dưới dạng 100% chiều cao và 100% chiều rộng và cho phép bạn lấy tất cả chiều cao 100% và chiều rộng 100% vào <td>