Windows relative CSS design

Web design test

by roge roge

HTML

<div class="header"> <p>Header</p> </div>
<div class="control"> 
  <p>Control</p>
  <p>... items ...</p>
</div>
<div class="work">
  <div class="subWork"> 
    <p>Sub work</p>
  </div>            
</div>
<div class="footer"> <p>Footer</p> </div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #444;
  font-family: 'Open Sans',sans-serif;
  font-size: 24px;
  color: white;
}

.header {
  background-color: #ffccaa;
  position: fixed;
  top: 0px;
  left: 0px;
  width: calc(100% - 24px);
  height: calc(70px - 24px);
  border: 2px solid #06a;
  padding: 10px
}

.footer {
  background-color: #eebb99;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: calc(100% - 24px); /* impact border + padding + margin */
  height: calc(70px - 24px); /* impact border + padding + margin */
  overflow: hidden;
  border: 2px solid #06a;
  padding: 10px
}

.control {
  background-color: #aaffcc;
  position: absolute;
  top: 70px;
  bottom: 70px;
  width: calc(340px - 44px); /* impact border + padding + margin */
  border: 2px solid #a60;
  padding: 20px;
}

.work {
  background-color: #aaccff;
  position: relative;
  top: 70px;
  bottom: 70px;
  left: 340px;
  width: calc(100% - 344px); /* impact border + padding + margin */
  height: calc(100% - 144px); /* impact border + padding + margin */
  border: 2px solid #0a6;
}

.subWork {
  background-color: #6688aa;
  width: calc(100% - 64px); /* impact border + padding + margin */
  height: calc(100% - 64px); /* impact border + padding + margin */
  border: 2px solid #eef;
  padding: 10px;
  margin: 20px;
}