面试题—首尾固定中间高度自适应实现的4种方式

最新推荐文章于 2022-04-14 17:12:56 发布

dou_xiaobao

最新推荐文章于 2022-04-14 17:12:56 发布

阅读量431

点赞数

分类专栏：布局面试题文章标签： css css3 html html5 vue.js

本文链接：https://blog.csdn.net/dou_xiaobao/article/details/107811539

版权

首尾固定中间高度自适应实现的4种方式

1、定位postion
2、弹性布局—flex
3、表格布局—table
4、网格布局—grid

1、定位postion

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>首尾固定中间高度自适应</title>
  <style>
    html, body {
    
      height: 100%;
      margin: 0;
      padding: 0
    }
    .head {
    
      height:80px;
      line-height:80px;
      background: #690;
      width: 100%;
      position: absolute;
      top: 0;
      text-align: center;
    }
    .body {
    
      background: #FC0;
      width: 100%;
      overflow: auto;
      top: 80px;
      position: absolute;
      text-align: center;
      bottom: 80px;
    }
    .foot {
    
      height: 80px;
      line-height: 80px;
      background: #690;
      width: 100%;
      position: absolute;
      bottom: 0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="head">固定头部80px;</div>
  <div class="body"> 
      中间自适应<br>
      中间自适应

最低0.47元/天解锁文章

dou_xiaobao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试题—首尾固定中间高度自适应实现的4种方式

首尾固定中间高度自适应实现的4种方式1、定位postion2、弹性布局—flex3、表格布局—table4、网格布局—grid1、定位postion<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-
复制链接

扫一扫