“overflow：hidden;”对于百分比大小的表单元格

问题描述：

我想要一个填充整个窗口的表格，每行填充表格高度的一半（以及窗口），并在窗口大小调整时保持此布局。当内容不溢出时，我可以做到这一点，但是当第一行的内容需要的高度大于计算的百分比高度时，该行不再保留该百分比，而是保持在期望的高度并且将第二行推出窗口。我试过“溢出：隐藏”;对于行，但这不是它的工作方式。那我该怎么做呢？“overflow：hidden;”对于百分比大小的表单元格

<!doctype html> 
<html> 
    <head> 
     <style> 
      html,body{height:100%;} 
      table{height:100%;} 
      table>tbody>tr{height:50%;overflow:hidden;} 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td>abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br  />abc<br /></td> 
      </tr> 
      <tr> 
       <td>def</td> 
      </tr> 
     </table> 
    </body> 
</html>

我有 “高度：100％;”，但没有 “宽度：100％;”。给予“宽度：100％;”给出了相同的结果。 – 2014-10-10 07:37:23

答

更新您的CSS如下。

html,body{height:100%; padding:0; margin:0;} 
table{height:100%;} 
table td{height:100%; overflow:auto; display:block; border:1px solid #ff00ff;}

DEMO

我想要** 2行，每个填充窗口**高度的一半，但在此演示中，第一行占据了大部分高度。 – 2014-10-10 08:02:54

你检查过它吗？我可以看到每行的相同半高。我正在使用chrome。 – 2014-10-10 08:11:12

我检查出ie11，现在我再次检查与铬，是它符合我的要求，但据说它在ie11中表现不同。 – 2014-10-10 08:34:09

“overflow：hidden;”对于百分比大小的表单元格

相关推荐