html - margin 似乎无法正常工作

Question

好的，我会保持简短，我想要实现的是我想在我的网站一侧作为侧边栏进行聊天，但现在我正在尝试添加一些每边都有边距，因此它会关闭，尽管这似乎无法正常工作，但这是代码。

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% 高度。