* {
  /* So 100% means 100% */
  box-sizing: border-box;
}

html, body {
  /* Make the body to be as tall as browser window */
  height: 100%;
  background: #ccc;
  /* padding: 10px; */
  /* font-size: calc(8px + (16 - 8) * ((100vw - 300px) / (1600 - 300))); */
  font-size:16px;
}

body {
  padding: /* 0px 10px 0px 10px; */ padding: 0px;
  background: #ffffff;  
}

.area-one {
  /* With the body as tall as the browser window
     this will be too */
  height: 100%;
}

.header { height:45px; color:#101010; background-color:#f8f8f8; border-bottom:.5px solid #808080; font-weight:bold; padding:5px 0px  5px 0px; }
.footer { height:45px; color:#101010; background-color:#f8f8f8; border-top:.5px solid #808080; font-weight:normal;  padding:5px 0px  5px 0px;}

.content {
  /* Subtract the header size */
  height: calc(100% - 90px);
  overflow: auto;
/*  background-image: url("https://assets.simpleviewinc.com/simpleview/image/upload/crm/phoenix/1220_7870_North-PHX_b9d51233-5056-b3a8-499284c9ec249cd0.jpg");
  background-repeat: no-repeat;
  background-size: 10% auto;
  background-position: center;
*/
}