Html 带可编辑文本字段的全高流体布局

我多年来一直在思考这个谜团，我不敢相信这么简单的布局不能用简单的html+css解决。所以我会在周末把这个传给你；-）

期望的结果

（心智模型：notepad.exe…）

要求：

• 没有javascript（'因为这是我当前不满意的解决方案）
• 纯CSS+HTML
• 尽可能实现跨浏览器兼容和优雅的可降解性（无flexbox！）
• 页眉和页脚的高度未知（遗憾的是无法工作）

---

我该怎么做？

您可能不喜欢这个答案，但我知道满足您所有标准的唯一方法是使用表格进行布局

HTML 由于表格具有100%的高度，它将根据需要拉伸所有行以满足高度要求。此样式可防止其拉伸页眉和页脚行：

.header, .footer {
  height: 0px;
}

此样式仅适用于Firefox：

tr {
  height: 100%;
}

在除IE之外的所有浏览器中，此样式都适用于

td

。我把它放在一个

div

中，因此它将与IE一起工作：

.container {
  position: relative;
  height: 100%;
}

现在我们有了一个具有相对定位的容器，我们可以对其内容应用100%高度和溢出的绝对定位：

.content {
  overflow: auto;
  position: absolute;
  height: 100%;
}

在IE11、Chrome、Firefox、Opera和Safari中测试

---

看起来像flexbox布局，但浏览器支持不是很好。非常酷！我试试看。感谢您的详细回答和工作代码！您尚未关闭HTML中的

s和

s。@RahulDesai，这些是HTML5中的可选关闭标记：。根据我的经验，它们在HTML4中也是不必要的。谢谢@RickHitchcock。我在上使用了您的代码，尽管我确实使用CSS表编码（即带display的divs:table/table row/table cell）实现了它，只是为了让它看起来不像是带有表的布局；-）几十万用户中的百分之几仍然是一个很大的数字；-）我现在用。。。

tr {
  height: 100%;
}

.container {
  position: relative;
  height: 100%;
}

.content {
  overflow: auto;
  position: absolute;
  height: 100%;
}