Question

这是我的jsfiddle：My fiddle

将“rule / event”类拖放到“layout”类之后，我希望“rule / event”的大小与“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;
}

拖放后div大小增加

1 个答案: