全屏自适应CSS布局

Question

我希望设置如下所描述的特定CSS布局：

1. 它是表结构的，因此每个行都有一定数量的单元格；不同行中的单元格边框可能不对齐；
2. 它是全屏的，不像占据整个设备显示器，而是使用所有的窗口空间-窗口高度应该被分成几行，它的长度应该用单元格来划分(完整窗口将是一个更精确的术语)。
3. 它是自适应的；意义、高度和长度是以窗口尺寸的百分比表示的；这也适用于边距、垫子等。

更准确地说，我正在尝试制作一个由消息区、在线用户列表、文本输入和“发送”按钮组成的网络聊天应用程序。我希望这些组件中的每一个都有一定(相对于窗口尺寸)长度的空间，在它们之间，在窗口边界和相邻组件之间(即边距)。我希望在缩放或调整窗口大小之后，这个布局能够保持不变。

我确实意识到，这可以通过Javascript (我有能力做到)来实现，但我认为这是丑陋的，效率较低，所以我想使用CSS (如果可能的话)。

到目前为止我试过：

1. 用包含实际可见元素的inline-block包装器标记窗口；没有真正起作用，因为将包装内容的宽度和高度设置为100%会使包装器(关于边框和边距)扩展，这会立即破坏布局；我知道我可以尝试98%、97.5%、97.2%等，但这不是很精确，所以它真的让我困扰
2. 使用浮动div(与上面相同)
3. 使用table、table-row和table-cell div；不能满足我的要求，因为只有绝对值才能这样工作。

我真的是个新手，所以我可能忽略了一些显而易见的要点。

Answer 1

好吧，使用Javascript看起来是这里唯一合理的选择。

Answer 2

您能使用vh和vw的测量吗，它们可以这样使用：

height 10vh;
width 100vw;

这将使1/10的屏幕高度和100%宽。