A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 卡哇伊伊 于 2019-3-9 17:31 编辑

[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>flex布局</title>
  <style>
    /* 页脚固定在底部 */
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height:100%;
    }
    #wrapper { height: 100%; display: flex; flex-direction: column;color:#fff;}
    #header, #body, #footer { width: 100%; }
    #header { flex: 0 0 auto; height:20px;background-color: red;}
    #body { flex: 1 0 auto; background-color: green}
    #footer { flex: 0 0 auto; background-color: blue;height:80px;line-height:80px;}
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
  </div>

</body>
</html>
更多图片 小图 大图
组图打开中,请稍候......

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马