完美解决网页内容随浏览器自适应布局，底部始终在底部

最新推荐文章于 2021-08-04 11:01:36 发布

weixin_30470857

最新推荐文章于 2021-08-04 11:01:36 发布

阅读量534

点赞数

原文链接：http://www.cnblogs.com/dengcho/p/3246269.html

版权

一直为这个问题困惑，挺常见的问题

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
    body,html{height: 100%;margin: 0;padding: 0;}
    .wrap{height: 100%;position: relative;overflow: hidden;}
    header{height: 50px;background: #ccc;overflow: hidden}
    section{background:#9acd32;height:100%;
            padding-bottom:100000px;margin-bottom:-100000px;
            border-top: 1px solid #666;border-bottom:1px solid #666;overflow: hidden; }
    footer{height: 50px;background: blue;width:100%;position: absolute;bottom: 0;}
</style>
<body>
<div class="wrap">
    <header>this is header</header>
    <section>this is body</section>
    <footer>copy right</footer>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/dengcho/p/3246269.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30470857

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美解决网页内容随浏览器自适应布局，底部始终在底部

一直为这个问题困惑，挺常见的问题<!DOCTYPE html><html><head> <title></title></head><style> body,html{height: 100%;margin: 0;padding: 0;} .wrap{he...
复制链接

扫一扫