css一屏布局展示

方法一

设置html的高度为100%，然后百分比高度。

<style>
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .wrap {
    height: 100%;
  }

  .top {
    height: 20%;
  }

  .content {
    height: 50%;
  }

  .footer {
    height: 30%;
  }
</style>

<div class="wrap">
  <div class="top">上</div>
  <div class="content">内容</div>
  <div class="footer">下</div>
</div>

方法二

设置html的高度为100%，运动定位 absolute ，上下固定高度，中间自适应
使用定位的：top和bottom组合使用，会有神奇的效果；设置中间元素的top为上部元素的height值，设置bottom为下部height值，不要设置中间元素的高度，设置上下定位的目的就是让其自适应高度。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.top {
  height: 100px;
}

.content {
  position: absolute;
  top: 100px;
  right: 0;
  bottom: 200px;
  left: 0;
}

.footer {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div class="wrap">
  <div class="top">上</div>
  <div class="content">内容</div>
  <div class="footer">下</div>
</div>

方法三

运动定位 fixed ，上下固定高度，中间自适应
使用fixed，不需要html为100%，也可以自适应

 html,
 body {
   margin: 0;
   padding: 0;
 }

 .wrap {
   width: 100%;
   height: 100%;
   position: relative;
 }

 .top {
   height: 100px;
 }

 .content {
   position: fixed;
   top: 100px;
   right: 0;
   bottom: 200px;
   left: 0;
 }

<div class="wrap">
  <div class="top">上</div>
  <div class="content">内容</div>
</div>

方法四

使用calc(100vh - 100px);

.top {
  width: 100%;
  height: 100px;
}

.content {
  width: 100%;
  height: calc(100vh - 100px); // 1vh表示屏幕高度的1% 
}