格大小的增加和刪除

Question

這裏是我的jsfiddle：My fiddle

後，我拖放「規則/事件」類「佈局」類，我想「規則/事件」的大小爲與「規則主體/事件主體」類相同。

放入「佈局」類時它的大小倍增。

是否因爲「規則 - 主體/事件 - 主體」和「佈局」類具有不同百分比（％）的高度？

.rule-body, .event-body{  
    height: 85%; 
    margin-top: 5%; 
    overflow-y: scroll; 
} 

.layout{ 
    height: 100%; 
    background-color: #ececec; 
} 

這是什麼修復？

任何幫助將不勝感激。謝謝！

Answer 1

由於您使用的是height: 8%; width: 50%;這些規則與父高度/寬度相關，因此在拖放父級更改後，您將得到不同的高度/寬度結果。

使用固定width/height或使用vw/vh

解決方法：https://jsfiddle.net/dalinhuang/0tdnmghr/

.rule{ 
    height: 25px; 
    width: 100px; 
    background-color: #aaa; 
    text-align: center; 
    margin-bottom: 5%; 
    border: 1px solid black; 
} 
.event { 
    height: 25px; 
    width: 100px; 
    background-color: #aaa; 
    text-align: center; 
    margin-bottom: 5%; 
    border: 1px solid black; 
}