使用CSS显示时：表为什么IE10中的高度100％会失败？

Posted 2023-01-14

我读过很多似乎没有解释或帮助解决这个问题的文章。所以我希望一些CSS wiz可以帮忙吗？

所以我使用CSS表格布局来实现样式div的简单垂直对齐。外部div具有计算的大小，内部嵌套的div从其各自的父级继承大小。一切都很好，直到你在IE10或以下查看。行和单元都决定它们的高度是0px。我相信这是因为没有在行级指定高度，所以在IE中单元格无法继承父高度。因此，如果您将100％的高度添加到该行，它仍然可以在IE 10以外的所有浏览器中正常工作，其中行决定其双倍高度。我唯一能想到的是IE不满意，我是在一个容器中放置一些100％的div，并让他们计算自己相同的大小。

.container 
  background-color: grey;
  height: calc(100px + 10px);
  width: 200px;
  position: fixed;

.table 
  height: 100%;
  width: 200px;
  background-color: black;
  display: table;

.row 
  width: 100%;
  display: table-row;
  background-color: orange;

.block-1 
  height: 100%;
  width: 100%;
  background-color: red;
  display: block;

.tablecell 
  /* height: 100%; */
  display: table-cell;

.block-2 
  height: 100%;
  width: 100%;
  background-color: blue;
  display: block;

<div class="container">
  <div class="table">
    <div class="row">
      <div class="tablecell">
        <div class="block-1"></div>
      </div>
    </div>
    <div class="row">
      <div class="tablecell">
        <div class="block-2"></div>
      </div>
    </div>
  </div>
</div>
<div>

这是一个fiddle通知，如果在IE 10或以下浏览，红色和蓝色潜水都无法看到，因为他们现在有零高度。