html - Div里面显示:table-row section not expanding to full width

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;