divのサイズが大きくなる。ここで

Question

を落とす私のjsfiddleです：私はドラッグして、「レイアウト」クラスに「ルール/イベント」クラスをドロップMy fiddle

した後、私は「ルール/イベント」の大きさになりたいです"rule-body/event-body"クラスと同じです。

「レイアウト」クラスにドロップしたときにサイズが増えています。

"rule-body/event-body"と "layout"クラスの高さのパーセンテージ（％）が異なるためですか？

.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; 
}