Dialog with fixed height header/body/footer

by greatCar

HTML

<div   class="main">

<div class="head">
ggg  
</div>

<div class="body">
ggg  
</div>

<div class="footer">
ggg  
</div>
</div>

CSS

.main{
  background-color: yellow;
  height: 300px;
}

.head{
  background-color: blue;
  height: 40px;
}

.body{
  background-color: red;
  height: 220px;
}

.footer{
  background-color: tan;
  height: 40px;
}