<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .clearfix { zoom: 1; display: inline-block; } .clearfix:before, .clearfix:after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden } .detail { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background: rgba(7, 17, 27, 0.8) } .detail-wrapper { min-height: 100%; } .detail-main { margin-top: 64px; padding-bottom: 64px; } .detail-close { position: relative; width: 32px; height: 32px; margin: -64px auto 0 auto; clear: both; font-size: 32px; } </style> </head> <body> <div class="detail"> <div class="detail-wrapper clearfix"> <div class="detail-main"> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> <p>随意添加内容</p> </div> </div> <div class="detail-close">+</div> </div> </body> </html>
1.css代码风格:布局放在最前面,样式放在后面
2.有浮动的地方,一定要清除浮动,先要有这个意识。另外设置了setTimeout和setInterval,一定要清除时间函数。
3.sticky footers布局的特点,无论你怎样添加内容,下面那个关闭按钮始终在屏幕底部,内容为空也在底部。
4.布局精髓在css上面,每个样式都有它的意义。