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

Question

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

虽然它们中的大多数都按照我想要的方式工作，但我无法弄清楚如何获取我的显示：阻止div在显示器内完全展开：table-cell部分，它完全跨越所有列... < / p>

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

您需要使用

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