页面底部固定
效果如图:
代码:
html, body { width: 100%; height: 100%; min-height: 100%; } .container { position: relative; height: auto; min-height: 100%; //关键的一行代码 margin: 0; } .container .header { height: 100px; background: #0000FF; } .container .push { padding-bottom: 100px; } .footer { position: relative; height: 100px; margin-top: -100px; background: #0000FF; border: #0000FF 1px solid; } //DOM <div class="container"> <div class="header"> <p>头部文本</p> </div> <div class="content"> <p>主体内容</p> </div> </div> <div class="footer"> <p>底部文本</p> </div>
补充知识点:
当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。