image
image.png
<!--遮罩层 css Sticky footer布局-->
<div class="detail" v-show="detailshow">
<div class="deta-wrapper clearfix">
<div class="detail-main">
<h1 class="name">{{seller.name}}</h1>
<star :size="48" :score="seller.score"></star>
</div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>
css
.detail{ //遮罩层
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(7,17,27,0.8);
.deta-wrapper{ //
min-height: 100%;
width: 100%;
}
.detail-main{
margin-top: 64px;
padding-bottom: 64px;
.name{
line-height: 16px;
text-align: center;
font-size: 16px;
font-weight: 700;
}
}
}
.detail-close{
position: relative;
width: 32px;
height: 32px;
margin: -64px auto 0 auto;
clear: both;
font-size: 32px;
}
}
<div class="content-wrapper">
<div class="content">
<p>I'm contented!</p>
<!-- put your html in here -->
</div>
</div>
<div class="footer">
<span>close</span>
</div>
css
body,html{
margin: 0;
padding: 0;
height: 100%;
}
p{
font-size: 2em;
}
.content-wrapper{
overflow: auto;
min-height: 100%;
background-color: rgba(0,0,0,.5);
}
.content-wrapper .content{
padding-bottom: 64px;
text-align: center;
}
.footer{
margin-top: -46px;
height: 46px;
width: 100%;
text-align: center;
}
.footer span{
padding: 5px 10px;
background-color: red;
border-radius: 5px;
}
有遮罩层的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="sd">
<div class="content-wrapper">
<div class="content">
<p>I'm contented!</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<p>I'm contented!01</p>
<!-- put your html in here -->
</div>
</div>
<div class="footer"> <span>close</span> </div>
</div>
<style>
body,html{
margin: 0;
padding: 0;
}
p{
font-size: 2em;
}
.sd{ position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
overflow: auto;
}
.content-wrapper{
min-height: 100%;
}
.content-wrapper .content{
padding-bottom: 64px;
text-align: center;
}
.footer{
margin-top: -64px;
height: 46px;
width: 100%;
text-align: center;
}
.footer span{
padding: 5px 10px;
background-color: red;
border-radius: 5px;
}
</style>
</body>
</html>
参考网址:https://blog.csdn.net/u011456552/article/details/55805480
