仅使用css完成此布局

使用CSS完成布局可以通过盒模型、浮动、定位、弹性布局等方式来实现。以下是一种可能的解决方案：

<!DOCTYPE html>
<html>
<head>
  <title>CSS布局</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .header {
      background-color: #f2f2f2;
      padding: 20px;
    }

    .content {
      flex: 1;
      display: flex;
    }

    .sidebar {
      background-color: #f2f2f2;
      width: 200px;
      padding: 20px;
    }

    .main {
      flex: 1;
      padding: 20px;
    }

    .footer {
      background-color: #f2f2f2;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <div class="sidebar">
        <h2>Sidebar</h2>
      </div>
      <div class="main">
        <h2>Main Content</h2>
      </div>
    </div>
    <div class="footer">
      <h3>Footer</h3>
    </div>
  </div>
</body>
</html>

这个布局使用了flexbox布局，将页面分为头部、内容、侧边栏、主要内容和底部。头部和底部使用相同的样式，背景色为浅灰色，内容居中显示。侧边栏和主要内容使用不同的背景色，侧边栏宽度固定为200px，主要内容占据剩余的空间。整个布局使用了盒模型，通过padding来设置内边距。

这只是一种示例布局，实际布局可以根据具体需求进行调整和修改。