Question

我读过许多似乎没有解释或帮助解决这个问题的文章。所以我希望一些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>

如果在IE 10或更低版本中浏览，则显示fiddle通知，无法看到红色和蓝色潜水，因为它们现在的高度为零。

Answer 1

为什么不使用javascript（旧的网页在javascript hacks上很重，以弥补旧浏览器中缺少css支持）这个非常小

adjustHeight();
window.addEventListener('resize', adjustHeight);

function adjustHeight(){
    document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px';
    // or if you have jQuery it would be even more retro compatible without too much hassle
    // $('.container').css('height', window.innerHeight);
};

你也可以用javascript进行垂直分离。

$('container-half').css('height', window.innerHeight/2 );就是一个例子

**编辑** 现在用你的例子

adjustHeight();
window.addEventListener('resize', adjustHeight);

function adjustHeight(){
  document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px';
};

.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>

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

1 个答案: