Question

我有下一个HTML代码

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

它适用于所有浏览器 - 除了IE之外，其中中间单元格中的蓝色div仅占用文本空间。可能有人知道如何将它拉伸到桌子内的整个自由空间？

更新：我知道页面布局中的表格不好。如果你能告诉我div格式的例子，它有顶部和底部块，可变高度和中间部分，使用浏览器窗口的所有可用空间，我将使用它。我保证=）

Answer 1

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

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

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

Answer 2

如果为height元素定义body，则蓝色单元格会展开以填充可用空间（JS FIddle demo）。问题是height: 100%的元素占据了其父的全部高度，为此，浏览器必须知道（被告知）该父元素的高度< EM>是

您可以使用JavaScript（JS Fiddle Demo）（或各种库中的任何一个，例如jQuery：JS Fiddle demo ¹）或使用：

table {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JS Fiddle demo

我不知道为什么使用jQuery版本会导致滚动。我已尝试从各种元素（padding和margin）中删除body，table等，但这会导致相同的行为。对我来说，这有点奇怪。

Answer 3

使用<div>应该是这样的：

<div style="width:100%;height:100%;background-color:#00f;color:#fff;">

    <div style="background-color:#f00;">
        <h1>This text should make height of this cell</h1>
    </div>

    This cell should take all unused space of table


    <div id="footer" style="background-color:#0f0; position:absolute; bottom:0px;width:100%;">
        <h1>This text should make height of<br> this cell</h1>
    </div>

</div>

中心内容不在<div>内，而在主<div>内。：）

如何在Internet Explorer中的全高度表中创建全高度单元格

3 个答案: