移动端的垂直布局

最新推荐文章于 2022-06-10 23:50:55 发布

曲小强

最新推荐文章于 2022-06-10 23:50:55 发布

阅读量550

点赞数 1

分类专栏：前端笔记 CSS

本文链接：https://blog.csdn.net/quhongqiang/article/details/79624415

版权

CSS 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端笔记

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      
      body {
        font: 12px/1.5 "\5FAE\8F6F\96C5\9ED1", arial;
        *line-height: 1.5;
      }
      
      html,
      body {
        height: 100%;
      }
      
      .wrap {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        background: #ffffff;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      
      header {
        width: 100%;
        height: 44px;
        background: #45c8a6;
        display: block;
      }
      
      section {
        -webkit-box-flex: 1;
        overflow-x: auto;
        background: red;
      }
      
      footer {
        width: 100%;
        height: 50px;
        background: blue;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        text-align: center;
        color: #959595;
        border-top: 1px #d9d9d9 solid;
      }
    </style>
    <title>移动端的垂直布局</title>
  </head>

  <body>
    <div class="wrap">
      <header> header </header>
      <section> content </section>
      <footer> footer </footer>
    </div>
  </body>

</html>

曲小强

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端的垂直布局

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
复制链接

扫一扫