<!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>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
<p>Add content at will</p>
</div>
</div>
<div class="detail-close">+</div>
</div>
</body>
</html>1.css code style: layout at the front, style at the back
2. If there is a floating place, it is necessary to clear the floating, and have this awareness first. In addition, setTimeout and setInterval are set, and the time function must be cleared.
3. The feature of sticky footers layout is that no matter how you add content, the close button below is always at the bottom of the screen, and the content is empty at the bottom.
4. The essence of layout is on css, and each style has its meaning.