前端笔记-CSS布局使得网页分成3部（头，内容，脚）

css代码如下：

<style>
 
  * {
    margin: 0;
    padding: 0;
  }
  .top {
    width: 100%;
    height: 40px;
    background-color: #2fa8ec;
    font-size: 20px;
    line-height: 25px;
  }
  .middle {
    position: absolute;
    top: 0px;
    bottom: 40px;
    width: 100%;
    /*background-color: yellow;*/
    font-size: 35px;
    /*text-align: center;*/
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px; /*行高与高度相等，内容垂直居中*/
    /*background-color: chartreuse;*/
    text-align: center;
  }
</style>

应用代码如下：

<template>
<div>
  <div class="middle">
    <div class="ui container">
      <div class="ui stackable grid">
        <div class="six wide column">
          <xxxxxxxx></xxxxxxxx>
        </div>
        <div class="six wide column">
          <xxxxxxxx></xxxxxxxx>
        </div>
        <div class="four wide column">
          <xxxxxxxx></xxxxxxxx>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <MainFunctionTool></MainFunctionTool>
  </div>
</div>
</template>

运行截图如下：