将div水平切成两半

Question

如何更改CSS here以使用动态父div大小并继续填充父div [{1}}的高度和完整宽度的一半？具体而言，theapp和#innerpanelA

我尝试使用％值而不是固定大小，但失败的可能性非常大。 一个纯粹的CSS和HTML解决方案将是最好的，没有js没有调整大小。

最好的问候

Answer 1

将两个子div（#innerpanelA和#innerpanelB）嵌套在父div（theapp）中，然后将以下代码添加到CSS中：

#innerpanelA {top:0; height:50%;}
#innerpanelB {top:50%; height:50%;}

top:0元素会告诉#innerpanelA正好位于父div的顶部，占用空间的一半（height:50%），无论div的大小是多少

top:50%元素会告诉#innerpanelB正好位于div的一半，占据空间的下半部分（height:50%），无论div的大小是多少

由于使用%，因此两个子div的高度将加起来达到100％，并且会响应浏览器大小，缩放等。

Answer 2

给予chessclockpanel高度：100％，innerpanelA和innerpanelB高度：每个50％。