橫向切割div

Question

如何更改CSS here以使用動態父級div大小並繼續填充父div的一半高度和完整寬度theapp？具體來說，#innerpanelA和#innerpanelB

我試過使用％值而不是固定的大小，但失敗的可怕。 純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%）。

top:50%元素會告訴#innerpanelB坐落在div的下半部分，佔用空間的下半部分（height:50%），無論div的大小如何。

由於使用了%，所以兩個子div高度將合計爲100％，並將響應瀏覽器大小，縮放等。

Answer 2

給予chessclockpanel高度：100％和innerpanelA和innerpanelB高度：各佔50％。