保证金似乎没有正常运作

Question

好的，我会保持简短，我想要实现的是我想在我的网站旁边聊天作为侧边栏，但现在我和＃39;我试图为每一方添加一些余量，以便它关闭，虽然这似乎没有正常工作，但这里是代码。

HTML

<div class="inner-chat">
    <div class="chat-box-messages">
        //Messages
    </div>

    <div class="chat-box-input">
        //Field to input
    </div>              
</div>

CSS

.inner-chat{
    margin:1vw;
}

.chat-box-messages{
    height:80%;
    background:yellow;
}

.chat-box-input{
    height:20%;
    background:green;
}

然后代码产生了这个，

我要说的最合乎逻辑的是，因为利润率正在推动它向下推动的每一方面，但我不知道如何以另一种方式解决这个问题。

Answer 1

div.chat-box-messages和div.chat-box-input的高度之和恰好相当于100％。您的1vw垂直边距会在该计算高度的顶部上添加，从而导致子元素溢出父级。为了计算额外的保证金，您必须从最终高度中减去总计2vw。一种方法是使用calc(80% - 1vw)和calc(20% - 1vw)作为子元素的高度，即：

.chat-box-messages{
    height: calc(80% - 1vw);
    background:yellow;
}

.chat-box-input{
    height: calc(20% - 1vw);
    background:green;
}

您当然可以在高度上执行任何其他类型的排列，例如使用calc(80% - 2vw)并坚持另一个元素的20％高度。