HTML 表格不使用全屏答案

【问题标题】：HTML Table does not use full screenHTML 表格不使用全屏
【发布时间】：2017-01-02 02:15:13
【问题描述】：

情况：

我正在编写一个 html 页面并添加了头部和正文。在我的身体中，我有 3 列，左、主和右。

对于这个问题，只有主要是重要的。我想在主列中制作一个带有文本的表格。我只添加了 3 行文本，所以表格没有完全填满，但我仍然希望表格是屏幕的全高，只是为了改善外观。然后它将是一个更大的盒子，而不是屏幕中间的一个小盒子。

在我的 CSS 文件中，我有这个：

    html {height:100%; width: 100%;}

    body 
    {
      margin:0; 
      height:100%;
      width: 100%;
      padding: 0;
      background-color: blue;
    }   

    #table1
     {
       background-color: black;
       height: 100%;
       width: 70%;
       z-index: 1;
       padding:15px;
     }

由于某种原因，height: 100% 不起作用。有人解释一下吗？

【问题讨论】：

你在 jsfiddle 的某个地方有这个吗？
不，我很抱歉.. 它与我其他问题的代码相同，唯一的问题是我希望我的桌子是 100% 高度。
如果你的table占据了100%，那footer怎么会在它下面呢？您希望页脚与表格重叠吗？
嗯，这是个好问题..我没想到.. 90% 怎么样？那可能吗？还是可以让页脚和表格一起100%占用？
将表格和页脚 div 放入一个 div 中。并且，使该 div 100% 不是表格本身。

标签： html css html-table

【解决方案1】：

要使元素的高度为 100%，您通常还必须为 body 和 html 提供 100% 的高度。

添加

body, html { height: 100%; }

到您的 CSS。

您需要设置层次结构中所有元素的高度才能使其正常工作。把它想象成“100% 的什么？是我父母的元素。”那么父母的身高是多少？

Demo

【讨论】：

我做到了，但我仍然有同样的问题..？有可能吗？
对层次结构中的所有元素执行 100% 高度。请参阅我的演示中的#bar
还是不全屏？也许是因为我使用了页眉和页脚？这可能是问题吗？我更改了问题并为我的 body 和 html 添加了 CSS 行，这是您的意思吗？
你必须发布一些 HTML 来制作一个完整的例子来说明你正在尝试做的事情。
我修好了，我试着理解你在说什么，我问自己，父母的身高是多少？然后我修好了，非常感谢！你帮我解决了这个问题:)

【解决方案2】：

你可能也需要给你的身体一个 100% 的高度，因为你的桌子在你的身体里，所以当你告诉桌子取 100% 的高度时，它实际上是身体高度的 100%，也就是本身不是 100%...

【讨论】：

【解决方案3】：

你必须将整个主列的CSS高度属性设置为100%，这里只是将表格高度设置为主div的100%，而不是屏幕的100%。

【讨论】：