HTML Table 不使用全屏

Question

情况:

我正在写一个 html 页面，我添加了一个 head 和 body。在我的体内，我有 3 列，左列、主列和右列。

对于这个问题只有 main 是重要的。我想在主栏中制作一个包含文本的表格。我只添加了 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% 不起作用。有人有解释吗？

Answer 1

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

添加

body, html { height: 100%; }

到你的 CSS。

您需要设置层次结构中所有元素的高度才能使其正常工作。将其视为“什么的 100%？作为我父元素的元素”。那 parent 的高度是多少？

Demo