【发布时间】：2017-05-13 22:09:44
【问题描述】：
我已经尝试了 3 天来避免在我的新响应式设计中使用表格，主要是因为每个人都说他们是邪恶的。另一方面，在对 SEO 和 table 进行更多研究的同时，有些人甚至说它提高了他们的知名度。
无论如何，div 和 HTML5 的语义要好得多，所以我真的很想让下面的这个例子工作。主要问题是在 IE9 & 10 中，“section row”会因为“height 100%”值而溢出。所有其他浏览器似乎反应良好。
有谁知道如何解决这个问题（最好不用 Javascript？）：
JSFiddle：http://jsfiddle.net/fvqvdske/1/
在 IE10 仿真模式下测试的全尺寸页面：http://jsfiddle.net/fvqvdske/1/show
唯一的问题是溢出和IE9, 10 - 中间行需要填满页眉和页脚留下的所有空间（并且页眉和页脚需要能够调整高度到动态适应他们的内容，例如没有固定的，没有绝对的位置）。
HTML
<body>
<header role="banner">
<div>
<div>
This is the top banner
</div>
</div>
</header>
<section role="main">
<div>
<div>
<div>
<div>
<div style="border: 2px solid red;">
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
</div>
</div>
</div>
</div>
</div>
</section>
<footer role="contentinfo">
<div>
<div>
This is the footer
</div>
</div>
</footer>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: table;
position: absolute;
border-spacing: 0;
border-collapse: collapse;
}
header, footer, section {
display: table-row;
text-align: center;
vertical-align: middle;
height: 1px;
}
header > div, section > div, footer > div {
display: table-cell;
vertical-align: middle;
}
header > div > div,
section > div > div,
section > div > div > div,
footer > div > div {
max-width: 400px;
width: 100%;
margin: auto;
background-color: brown;
}
section,
section > div,
section > div > div,
section > div > div > div,
section > div > div > div > div {
box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222;
height: 100%;
vertical-align: middle;
}
section > div {
display: table-cell;
width: 100%;
height: 100%;
}
section > div > div {
display: table;
margin: auto;
}
section > div > div > div {
display: table-row;
}
section > div > div > div > div {
display: table-cell;
}
section {
}
/* temp */
header {
background-color: pink;
}
section {
background-color: yellow;
}
footer {
background-color: orange;
}
【问题讨论】：
-
这是一个丑陋的错误，你试过用弹性盒子吗？
display: flex;jsfiddle.net/GXe9m/2 -
我的项目对 Flexbox 的支持不够：caniuse.com/#search=flexbox - 你确定这是一个错误……我们无能为力吗？我做了一个小更新来清理我的 css 并使它更容易理解。
-
就个人而言，如果我必须使用 display:table、table-row 和 table-cell，那么我会使用实际的 HTML 表格。对我来说似乎很困惑。从未听说过 SEO 论点。你有更多相关信息的链接吗？
-
@nbouvrette 尝试设置
max-height:100%;和height: 100%;有区别吗？ -
这里是 SEO 链接：webmasters.stackexchange.com/questions/6890/… - 我使用表格的唯一原因是中间部分。当没有足够的内容时，我希望它填充 100% 的高度。我有 2 个其他线程在没有表格的情况下解决这个问题，没有人能弄清楚。我有一个表格布局也可以很好地工作，但从语义上讲这个更简单（但正如你所说，可能不太容易理解）。
标签： css html internet-explorer css-tables