本文实例: 按钮始终在距离页面底部16px的位置,注意是页面底部,不是屏幕底部
如果放置在屏幕底部,只需要给元素设置以下内容
.element {
position: fixed;
bottom: 16px;
}
如果需要放在页面底部,需要完成下面几步
1、给父元素设置position: relative;
2、保证父元素是包裹所有内容区,并且设置最小高度为100%;
3、给父元素设置padding-bottom,数值为按钮大小+距离底部大小+距离按钮上一个元素的距离,这样做是为了当页面大于100%的时候,给按钮留出充足的位置
4、按钮设置position:absolute; bottom: 16px;
完成以上几步,就可以做到任务页面长度,按钮都距离页面底部16px了
<style>
body {
background-color:#d0e4fe;
}
.wrapper {
position: relative;
padding-bottom: 100px;
min-height: 100%;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
.button {
position: absolute;
bottom: 16px;
width: 100px;
height:30px;
background-color: orange;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<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 class="button">按钮</div>
</div>
</body>