html - 让element取剩余高度不使用display :table-row and absolute positioning

Question

一个相当常见的案例 as demonstrated here据我自己的研究所知，通常可以通过以下任一方式解决:

• display:table-row 到 .titleBar 和 .content 并将 display:table 应用于父级
• position:absolute 到 .content 所有四个轴都设置为 0，这样元素就会拉伸(stretch)

不幸的是，在我的实际生活环境中，由于特定原因我无法应用其中任何一个。

有没有办法让 .content 拉伸(stretch)到剩余的可用高度而不忽略 .titleBar 的高度(正如您在示例中向下滚动看到的那样) ？

Answer 1

也许您应该像这样更改这些元素中的高度属性？

.outer .titleBar {
    height: 5%;
}
.outer .content {
    height: 95%;
}