css如何实现footer定位(完整代码)
程序员文章站
2022-04-04 09:37:52
...
本篇文章给大家带来的内容是关于css如何实现footer定位(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
css实现footer定位
<!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> <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } *{ margin: 0; padding: 0; } .box{ width: 100%; min-height: 100%; padding-bottom: 50px; box-sizing: border-box; background: #e4e4e4; } .content{ background: #fff; border-bottom: 1px solid #999; } button{ margin: 10px auto; line-height: 30px; width: 20%; } footer{ height: 50px; line-height: 50px; text-align: center; margin-top: -50px; background: #fff; } </style> </head> <body> <div class="box"> <button onclick="beLong()">变长</button> <p class="content" id="content">内容</p> </div> <footer>footer</footer></body><script> function beLong() { document.getElementById('content').style.height = '1000px'; }</script> </html>
相关推荐:
以上就是css如何实现footer定位(完整代码)的详细内容,更多请关注其它相关文章!
推荐阅读