如何在 Internet Explorer 中的全高表格中制作全高单元格 [英] how to make full height cell in full height table in Internet Explorer

查看：41 发布时间：2021/12/18 12:39:42 html css internet-explorer

本文介绍了如何在 Internet Explorer 中的全高表格中制作全高单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有下一个 html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><头><style type="text/css">html {height:100%;}body {height:100%;margin:0;}h1 {form-size:20px;margin:0;padding:20px;}</风格><身体><table style="width:100%;height:100%"><tr><td><div style="background-color:#f00;"><h1>这个文本应该使这个单元格的高度</h1>

</td></tr><tr style="height:100%;"id="行"><td style="background-color:#c0c;"><div style="height:100%;width:100%;background-color:#00f;color:#fff;">此单元格应占用表格的所有未使用空间

</td></tr><tr><td><div style="background-color:#0f0;"><h1>此文本的高度应为<br>该单元格

</td></tr>

它适用于所有浏览器 - 除了 IE，其中中间单元格内的蓝色 div 仅占用文本空间.可能有人知道如何将其拉伸到表格内的整个可用空间?

更新:我知道表格在页面布局中很糟糕.如果您可以向我展示具有可变高度的顶部和底部块和使用浏览器窗口的所有可用空间的顶部和底部块的 div 布局示例，我将使用它.我保证 =)

解决方案

请不要使用表格进行布局，

使用 Divs 和 CSS，使用表格被认为是一种不好的做法:

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

转换为 DIV 的现场演示

I have next html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style type="text/css">
    html {height:100%;}body {height:100%;margin:0;}
    h1 {form-size:20px;margin:0;padding:20px;}
  </style>
</head>
<body>
  <table style="width:100%;height:100%">
   <tr>
     <td>
       <div style="background-color:#f00;">
         <h1>This text should make height of this cell</h1>
       </div>
     </td>
   </tr>
   <tr style="height:100%;" id="row">
     <td style="background-color:#c0c;">
       <div style="height:100%;width:100%;background-color:#00f;color:#fff;">
         This cell should take all unused space of table
       </div>
     </td>
   </tr>
   <tr>
     <td>
       <div style="background-color:#0f0;">
        <h1>This text should make height of<br> this cell</h1>
       </div>
     </td>
   </tr>
  </table>
</body>
</html>

It works perfect in all browsers - except IE, where blue div inside middle cell takes space only for text. May be someone know how to stretch it to whole free space inside table?

UPDATE: I Know that tables are bad in page-layout. if you can show me example of div layout which have top and bottom block with variable height and middle part which use all free space of browser window I will use it. I promise =)

解决方案

Don't use tables for layout please,

Use Divs and CSS, It is considered a bad practice to use tables:

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Live Demo converted to DIV's

这篇关于如何在 Internet Explorer 中的全高表格中制作全高单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！