1

我有一个快速的问题给你们。我仍在学习 HTML，但我正在处理个人页面，并且希望框分布在整个窗口中，无论窗口有多大或多小。当我水平做时效果很好，但从不垂直工作。它只是向下保持标准格式。

我的代码

HTML：

<table class="table" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

CSS：

.table {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: central;
4

3 回答 3

4

你的 body 和 html 选择器是否有 100% 的高度？如果没有，请使用以下内容扩展您的样式表：

html,
body {
    height: 100%;
}
于 2013-04-05T14:41:39.217 回答
2

它没有调整大小，因为设置table { height:100%; }只是告诉它填充其父级的 100%。您将需要设置您的html和bodyheight:100%

jsFiddle

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

.table {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: central;
}
于 2013-04-05T14:42:37.473 回答
0

也许这height: 100% !important;会让它发挥作用。

于 2013-04-05T14:42:22.863 回答