让表格在 td 中填充 100% 的高度答案

【问题标题】：Getting a table to fill 100% height in a td让表格在 td 中填充 100% 的高度
【发布时间】：2012-04-09 14:23:05
【问题描述】：

我正在尝试用正确的 HTML 重写网站。我试图替换的网站是一团糟。我遇到了一个问题，我无法让<table> 填充它所包含的<td> 的高度。我尝试在<table> 上设置height: 100%，它基于google 和stackoverflow研究应该有效，但我一定错过了一些愚蠢的东西。在切换到表格之前，我曾尝试对 <divs> 做同样的事情，但如果有人可以建议如何做，我不反对回到 <divs>。

我正在开发的内容目前在这里：http://96.0.22.228/

由于项目时间限制，我不得不使用糟糕的技巧来使页面看起来正确。我没有声明<doctype>，而是强制IE 使用IE7-quirks 模式。我很想就如何使用 HTML5 和 CSS 以适当的方式进行此布局提出建议。它不必支持较旧的浏览器，但它必须在最新版本的 Chrome、Firefox 和 IE 中看起来相同。我还想取消菜单的图像，并在 CSS 中为边框和菜单文本设置所有样式。

尽管我必须按原样完成网站，但如果这个问题有好的答案，我愿意稍后返回并修复它。

【问题讨论】：

您介意使用 div 来完成三列布局吗？这将使百分之一百的高度变得不那么棘手。
@Costa 绝对是，但是我在 div 试图让中间的 flash 对象正确排列时遇到了其他问题。如果您能给我一些建议作为答案，我很乐意尝试。
关于 css 布局的激烈争论持续了一段时间。这是一个例子，注意夸张的标题：matthewjamestaylor.com/blog/perfect-3-column.htm 所以，我喜欢自己发明布局，了解渲染中实际发生的情况，以及导致问题的浏览器差异。更适合我自己的学习。让我草拟一些东西并将其作为对您特定挑战的答案提交。我将使用固定大小的彩色 div 来代替 flash 对象。
你也可以试试这个：net.tutsplus.com/articles/news/everything-you-know-is-wrong
检查这个答案（td height 100% and table height 100% ）stackoverflow.com/questions/18488148/…

标签： css html html-table

【解决方案1】：

表格单元格中的 100% 高度总是很痛苦。从技术上讲，TD 没有高度（因为这取决于其内容）。你要求浏览器做的是让孩子 100% 的父母，这是 100% 的孩子，这是 100% 的父母......你可以看到这可能是一个问题。

您可以尝试向 TD 添加显式高度并在桌子上使用 table-layout:fixed。至少这样浏览器就知道父母的高度而不需要孩子的高度，但这仍然可能不起作用。

您可能需要重新考虑如何处理此问题。

【讨论】：

这基本上就是我遇到的问题。我很乐意重新考虑这一点，但我认为我看得太久了。基本上我需要左侧的导航来匹配其余内容的高度。因此，虽然第一页有一些具有特定高度的 Flash 内容，但其他页面会更高。我愿意接受任何建议...
我建议不要将菜单高度与内容匹配。所有这一切都会导致按钮在页面之间更改大小，从而导致导航不一致。
按钮需要保持相同的高度，但菜单底部需要有空白空间，以便两个条形轮廓在其余高度继续。这是我正在重写的网站的一个页面作为示例：crabcay.com/spa_resort/index.asp BTW，感谢您抽出时间讨论这个问题。

【解决方案2】：

我有一个解决方案，如果您需要您想要的结果，您可以调整 (td.navigation a class link) 的填充，您将获得结果。

应用这个 css:-

td.navigation a {
    color: #837768;
    display: block;
    font-size: 1.2em;
    padding: 14px 5px;
    text-align: center;
    text-decoration: none;
}

【讨论】：

【解决方案3】：

所以这里是用 div 完成的，以 % 为单位的绝对定位，这是你不喜欢的部分，以像素为单位设置特定的高度。问题是，如果您使用表格单元格 (td)，则 td 没有高度，因此内部的任何元素都将计算 0 表示 100% 高度。

当我们使用 div 时，问题就不同了。我们可以确保它们保留它们的高度属性，但没有办法告诉左边的 div，“与中心的 div 高度相同”。至少我不知道。话虽如此，您的 flash 对象似乎是最高的东西，您可以轻松地将所有三个 div 的高度设置为像素完美的数量。然后将 ul 导航列表拉伸到其嵌套的 div 的 100% 的高度。

还有另一种方法可以做到这一点，可能会更好地满足您的需求，我将在最底部详细说明。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>

<style type="text/css">
  body, html {
    background: black;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
  }
  #left {
    position:absolute;
    top:10%;
    left:0;
    background: #eeeeee;
    width: 20%;
    padding: 2%;
    margin:0;
  }
  #right {
    position:absolute;
    top:10%;
    left:76%;
    background: #eeeeee;
    width: 20%;
    padding: 2%;
    margin:0;
  }
  #center {
    position:absolute;
    top:10%;
    left:24%;
    background: #dddddd;
    width: 48%;
    padding: 2%;
    margin:0;
  }
  #flash {
    background:red;
    width: 500px;
    height: 500px;
    padding:0;
    margin:0;
  }
  ul {
    height: 500px;
    padding:0;
    margin:0;
    padding-left:25px;
    background: #4359ac;
    color: #ffffff;
  }
  li {
    height: 10%;
    padding:0;
    margin:0;
  }
</style>

</head>
<body>

<div id="left">
  <ul>
    <li>Spa</li>
    <li>Hotel</li>
    <li>Activities</li>
    <li>Hobbies</li>
    <li>Night Life</li>
    <li>Food</li>
    <li>Feedback</li>
    <li>Contact</li>
    <li>About Us</li>
    <li>Copyright</li>
  </ul>
</div>
<div id="center">
  <div id="flash">Here's your flash Object</div>
</div>
<div id="right">
  here's the right div
  <br>
  <p>Let's throw some random text in here to take up space for now.</p>
</div>

</body>
</html>

您的另一个选择是将三列包装在一个容器 div 中，并为该 div 定义一个高度，然后将每个列拉伸到该容器 div 内的 100% 高度。

【讨论】：

【解决方案4】：

最好的解决方案是让button 的父元素也有 100% 的高度，假设您希望按钮的高度为 100%。

例如

<tr>
  <td><button class="btn" id="1">1</button></td>
  <td><button class="btn" id="2">2</button></td>
  <td><button class="btn" id="3">3</button></td>
  <td><button class="btn" id="plus">+</button></td>
  <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>

CSS：

td{
    height: 100%;
}
.btn {
    width: 100%;
    height: 100%;
}

应该没问题

【讨论】：

这适用于简单的示例，但如果任何单元格中的内容换行到另一行（例如 1 个单元格包含长文本字符串），则会失败

【解决方案5】：

///如何设置主表高度

<table bordercolor="#f6f6f6" style="height:100px;">
    <tr>
        <td style="padding:0px;">
            <table style="height:100%; width:100%;">
                <tr>
                    <td style="border-right:1px solid #f6f6f6; width:50px;">Test1</td>
                    <td>Test2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【讨论】：