阅读背景:

box-sizing: border-box的使用让div始终在页面底部

来源:互联网 
废话不说直接上代码(没有测试兼容性)
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>div始终在页面底部</title><style type="text/css">p,.bottom {margin: 0;padding: 0;text-align: center;font-size: 36px;color: #fff;line-height: 80px;}html,body {height: 100%;overflow:hidden;}.f-div {min-height: 100%;position: relative;box-sizing: border-box;}.f-over {height: 100%;position: relative;overflow-y: auto;overflow-x: hidden;}p {height: 300px;background-color: silver;}.bottom {position: absolute;left: 0;right: 0;bottom: 10px;background-color: chocolate;height: 80px;display: block;}</style></head><body><div class="f-over"><div class="f-div"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><div class="bottom">底部</div></div><div></body></html><!doctype html><html lang=



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: