用最简单的代码同时实现自适应宽度和高度的布局效果

html代码：

<header class="header"></header>
<aside class="aside"></aside>
<main class="main"></main>

css代码：

.header{
  width: 100%;
  height: 60px;
  background-color: #B3C0D1;
}

.aside{
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 300px;
  background-color: #D3DCE6;
}

.main{
  position: absolute;
  top: 60px;
  right: 0;
  left: 300px;
  bottom: 0;
  background-color: #E9EEF3;
}

效果展示：