用最簡單的代碼同時實作自适應寬度和高度的布局效果

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

效果展示：