保证金似乎不能正常工作

好的，我会保持简短，我试图实现的是我想在我的网站侧边聊一个侧栏，但现在我试图向每一边添加一些边距，以便它关闭，虽然这似乎不能正常工作，但代码如下。保证金似乎不能正常工作

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

然后代码生成此，

最逻我想说的是，因为保证金在推动每一方都在推动，但我不知道如何以另一种方式解决这个问题。

来源

2017-04-15 Martijn Ebbens

我认为问题在于您使用'％'来定义'div'的高度。尝试使用'80％-1vw'来代替您的保证金空间。 – Lae

@Lae谢谢！学到了新东西！由于我不能接受这个答案，我会继续接受特里的基本上相同的说法，谢谢:) –

的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％高度另一个元素。

来源

2017-04-15 14:17:58 Terry

Yeap，谢谢！我从来不知道我必须为我的保证金腾出空间。这完美的作品！ –

保证金似乎不能正常工作

回答

相关问题