Sticky footers 经典布局（兼容性最好的一种布局方式）

约定不等于承诺〃 2021-09-14 13:28 375阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         .clearfix {
  16.             zoom: 1;
  17.             display: inline-block;
  18.         }
  20.         .clearfix:before,
  21.         .clearfix:after {
  22.             display: block;
  23.             content: ".";
  24.             height: 0;
  25.             line-height: 0;
  26.             clear: both;
  27.             visibility: hidden
  28.         }
  30.         .detail {
  31.             position: fixed;
  32.             z-index: 100;
  33.             top: 0;
  34.             left: 0;
  35.             width: 100%;
  36.             height: 100%;
  37.             overflow: auto;
  38.             background: rgba(7, 17, 27, 0.8)
  39.         }
  41.         .detail-wrapper {
  42.             min-height: 100%;
  43.         }
  45.         .detail-main {
  46.             margin-top: 64px;
  47.             padding-bottom: 64px;
  48.         }
  50.         .detail-close {
  51.             position: relative;
  52.             width: 32px;
  53.             height: 32px;
  54.             margin: -64px auto 0 auto;
  55.             clear: both;
  56.             font-size: 32px;
  57.         }
  58.     </style>
  59. </head>
  61. <body>
  62.     <div class="detail">
  63.         <div class="detail-wrapper clearfix">
  64.             <div class="detail-main">
  65.                 <p>随意添加内容</p>
  66.                 <p>随意添加内容</p>
  67.                 <p>随意添加内容</p>
  68.                 <p>随意添加内容</p>
  69.                 <p>随意添加内容</p>
  70.                 <p>随意添加内容</p>
  71.                 <p>随意添加内容</p>
  72.                 <p>随意添加内容</p>
  73.                 <p>随意添加内容</p>
  74.                 <p>随意添加内容</p>
  75.                 <p>随意添加内容</p>
  76.                 <p>随意添加内容</p>
  77.                 <p>随意添加内容</p>
  78.                 <p>随意添加内容</p>
  79.                 <p>随意添加内容</p>
  80.                 <p>随意添加内容</p>
  81.                 <p>随意添加内容</p>
  82.                 <p>随意添加内容</p>
  83.                 <p>随意添加内容</p>
  84.                 <p>随意添加内容</p>
  85.                 <p>随意添加内容</p>
  86.                 <p>随意添加内容</p>
  87.                 <p>随意添加内容</p>
  88.             </div>
  89.         </div>
  90.         <div class="detail-close">+</div>
  91.     </div>
  92. </body>
  94. </html>

1.css代码风格：布局放在最前面，样式放在后面

2.有浮动的地方，一定要清除浮动，先要有这个意识。另外设置了setTimeout和setInterval,一定要清除时间函数。

3.sticky footers布局的特点，无论你怎样添加内容，下面那个关闭按钮始终在屏幕底部，内容为空也在底部。

4.布局精髓在css上面，每个样式都有它的意义。

发表评论

表情：
评论列表 （有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Sticky footer

    Sticky footer布局是什么？ 我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

    àì夳堔傛蜴生んèńàì夳堔傛蜴生んèń/ 0 赞/ 262 阅读