即使行内容太大，如何约束 HTML 表格始终具有 100% 的高度答案

【问题标题】：How to constrain HTML table to always have 100% height even if row contents are too large即使行内容太大，如何约束 HTML 表格始终具有 100% 的高度
【发布时间】：2015-06-08 00:10:43
【问题描述】：

我想要一个具有固定高度的页眉和页脚的页面，并且内容占剩余高度的 100%。

我目前在 Chrome 中具有我想要的行为，但在 Internet Explorer 中，行将超出所需的高度，迫使页脚离开页面（页面上的滚动条就是证明）。我一辈子都找不到解决 Internet Explorer 问题的方法。

这是所需的行为（在 Chrome 中），请注意该行不会扩展以适应内容，而是可以滚动：

这是我在使用 Internet Explorer 时遇到的不良行为：

这是我正在采取的方法：

<head>
   <style>
      body {
         margin: 0px;
         table-layout:fixed;
      }
      table {
         border-collapse:collapse;
      }
      table, tr, td {
         overflow:hidden;
         padding: 0px;
      }
   </style>
</head>

<body>
   <table style="width:100%; height:100%; top:0px; bottom:0px;">
      <!--HEADER-->
      <tr style="height:100px;">
         <td colspan="2" style="background-color:#ff0000; text-align:center;">
            <h1>Piano Festival</h1>
         </td>
      </tr>

      <!--CONTENTS-->
      <tr>
         <!--LEFT CONTENT PANE-->
         <td style="background-color:#ff00ff;">
            <div style="height:100%; overflow-y:scroll;">
            <form>
               <!--Form contents here-->
            </form>
            </div>
         </td>

         <!--RIGHT CONTENT PANE-->
         <td style="background-color:#00ffff; width:100%;">
         </td>
      </tr>

      <!--FOOTER-->
      <tr style="height:100px;">
         <td colspan="2" style="background-color:#00ff00";>
         </td>
      </tr>
   </table>
</body>

我宁愿避免使用任何 Javascript 或 CSS 扩展。如何解决这个问题，以便我在 IE 中获得与我现在在 Chrome 中相同的行为（可滚动内容而不是不断增长的行高）？

【问题讨论】：

我建议在不使用表格的情况下这样做
这不是表格数据，所以不要使用表格元素。如果您想要表格显示，请使用 CSS 表格。
这里有一个更好的方法：jsfiddle.net/juroto/HL6Ad
@Dan Beaulieu，我曾尝试先使用 div 进行此操作，这将是我的首选方法。正如您给出的示例一样，我的页眉和页脚都在工作。但是我遇到了两个内容列填充的内容超出空间的问题，并且每个 div 都有一个滚动条以在 div 内滚动。你有没有机会给我一个例子来说明你将如何处理这个问题？
添加了一个 jsFiddle 供您查看，如果这是您要找的，请告诉我

标签： html css internet-explorer html-table row-height

【解决方案1】：

我也强烈建议不要为此使用表格。这是一个使用 div 来帮助您入门的重构版本。

HTML：

<div class="header">
  <h1>Piano Festival</h1>
</div>

<div class="registration">
  ...lots of stuff....
</div>

<div class="main">
  Main section
</div>

<div class="footer">
  footer
</div>

这是 CSS：

body, html {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.header {
  margin: 0;
  background: darkgreen;
  height: 10%;
}

.registration {
  background: deeppink;
  width: 20%;
  overflow: auto;
  height: 80%;
  float: left;
}

.main {
  display: inline-block;
}

.footer {
  background: blue;
  height: 10%;
  position: fixed;
  width: 100%;
  bottom: 0;
}

Here's a working demo.

【讨论】：

这与我正在寻找的非常接近，并且可能会解决我的问题。我将花几分钟看看是否可以将其调整为具有固定高度的页眉和页脚而不是百分比，并使其右侧窗格与左侧窗格滚动相同。如果我能解决这些问题，我会接受这个答案。 :)
一旦我切换到固定高度的页眉和页脚，我开始遇到我之前在使用 div 时遇到的相同问题。我不知道如何调整内容列 div 的大小以占据 100% 的高度，除了页眉和页脚使用的内容没有滚动问题（部分内容 div 隐藏在页脚下或不显示滚动条的底部）