html - 親divの真ん中にdivを作る

Question

パーセンテージ値を使用してそれを行うことができますが、私の問題は、パーセンテージ値が提供できない（幅と高さの両方に関して）ギャップがある#chat-innerことです。明確に理解するには、CSS コードのコメントを参照してください。#chat-main2px

JSbin

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

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

デモ

Answer 2

次のようなものを試してください ( 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;
}