可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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

回答2:

If you define a height for the body element then the blue cell does expand to fill the available space (JS FIddle demo). The problem is that an element of height: 100% takes up the full height of its parent, and for that to happen the browser has to know (be told) what the height of that parent element is.

You could achieve this with JavaScript (JS Fiddle Demo) (or any one of the various libraries, eg jQuery: JS Fiddle demo¹), or by using:

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

JS Fiddle demo

I have no idea why using the jQuery version results in scrolling. I've tried removing padding, margin etc from the various elements (body and table), but it results in the same behaviour. Which is a tad weird, to me.

回答3:

Using <div> should be something like this:

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

The content in the center is not within a <div>, but in the main <div> itself. :)