css上中下页面布局

CSS是网页设计中的重要一环，其中页面布局是设计中的必要要素。上中下布局是一种经典的页面布局方式，可以帮助我们实现复杂页面效果。下面我们将介绍如何实现CSS上中下页面布局。

 /* HTML结构 */
  <div class="wrapper">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>

  /* CSS样式 */
  .wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .header {
    width: 100%;
    height: 100px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
  }
  .content {
    width: 100%;
    height: calc(100% - 200px);
    background: green;
    position: absolute;
    top: 100px;
    left: 0;
  }
  .footer {
    width: 100%;
    height: 100px;
    background: blue;
    position: absolute;
    bottom: 0;
    left: 0;
  } 

代码解析：

首先是HTML结构，我们使用了一个包裹层wrapper，以便将布局组合在一起。wrapper下面包含三个部分：header、content和footer，分别代表网页的头部、内容和底部。

然后是CSS样式，我们设置包裹层wrapper的宽和高都为100%，相当于铺满整个页面。然后我们将header、content和footer的宽度设置为100%，高度分别为100px、calc(100% - 200px) 和100px，这样就确定了每个部分在页面中的大小。接下来，我们将header、content和footer都设置为绝对定位，以便将它们定位在页面中正确的位置。

我们给header设置位置为top: 0和left: 0，就能够将其与页面的顶部和左侧对齐。给content设置位置为top: 100px和left: 0，就能够让它跟随header下移。由于content的高度是计算得到的，所以我们使用calc()函数来计算高度。最后，我们给footer设置bottom: 0和left: 0，就能够将其与页面的底部和左侧对齐。

总之，使用上中下布局是实现复杂页面效果的重要技巧，在未来的项目中可以考虑使用。以上就是这种布局方式的实现方法。