我试图将#chat-inner
div保留在#chat-main
div的中间,我可以通过使用百分比值来做到这一点,但我的问题是应该有2px
间隙(关于宽度和高度),百分比值不能提供。为了清楚理解,请参阅CSS代码中的注释。
HTML
<div id="chat-outline">
<div id="chat-main">
<div id="chat-inner">
</div>
</div>
</div>
CSS
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
}
#chat-inner
{
width:95%;
height:97%;
/*How can I give pixels here? I need 2px value*/
margin:2.5% 2.5% 2.5% 2.5%;
/*margin:2px;*/
background-color:cornflowerblue;
}
答案 0 :(得分:1)
尝试这样的事情(demo):
#chat-outline
{ background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
position:relative;
}
#chat-inner
{
top:2px;
bottom:2px;
right:2px;
left:2px;
background-color:cornflowerblue;
position:absolute;
}
答案 1 :(得分:1)
您还可以通过padding
获得所需的结果: -
#chat-outline
{background-color:grey;width:30%;height:40%;
position:fixed;bottom:5px;right:5px;
padding:2px;}
#chat-main
{
width:100%;
height:100%;
background-color:silver;
overflow:hidden;
padding:2px;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#chat-inner
{
width:100%;
height:100%;
background-color:cornflowerblue;
}
<强> DEMO 强>