显示内的 div：表格行部分未扩展到全宽

Question

我正在尝试使用表格显示为我的 html 标记设置我的网站的布局。

尽管它们中的大多数都按照我想要的方式工作，但我不知道如何让我的 display:block div 在 display:table-cell 部分内完全展开，该部分成功跨越所有列...

当我运行检查器时，我可以看到我的所有 html 标记都很好（如表格、行和单元格），但在 section 标记内部。

任何提示？这是我的代码：

html {
  height: 100%;
}

body {
  display: table;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

header {
  display: table-row;
  height: 80px;
  background-color: #EEEEEE;
}

header > div {
  display: table-cell;
}

section {
  display: table-row;
  background-color: #DDDDDD;
  column-span: all;
  -webkit-column-span: all; /* Chrome, Safari, Opera */
}

section > div {
  display: block;
  width: 100%;
  height: 100%;
}

footer {
  display: table-row;
  column-span: all;
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  height: 80px;
  background-color: #EEEEEE;
}

.h-sep {
  border-bottom: 1px solid black;
}

.v-sep {
  border-right: 1px solid black;
}

.tile-s-fixed {
  width: 80px;
}

<header>

  <div class="h-sep v-sep">One</div>

  <div class="tile-s-fixed h-sep">Two</div>

</header>

<section>

  <div class="h-sep">Three</div>

</section>

<footer>

  <div>Four</div>

</footer>

Answer 1

您可能需要对您的方法进行一些更改，并采用更接近此的方法： http://jsfiddle.net/ZQQY4/

你需要使用

display: table-row-group AND display: table-caption;