CSS实现内容高度不够的时候底部(footer)自动贴底

上传人:s9****2 文档编号:470024433 上传时间:2023-07-12 格式:DOC 页数:2 大小:56.50KB
返回 下载 相关 举报
CSS实现内容高度不够的时候底部(footer)自动贴底_第1页
第1页 / 共2页
CSS实现内容高度不够的时候底部(footer)自动贴底_第2页
第2页 / 共2页
亲,该文档总共2页,全部预览完了,如果喜欢就下载吧!
资源描述

《CSS实现内容高度不够的时候底部(footer)自动贴底》由会员分享,可在线阅读,更多相关《CSS实现内容高度不够的时候底部(footer)自动贴底(2页珍藏版)》请在金锄头文库上搜索。

1、CSS实现内容高度不够的时候底部(foote)自动贴底在切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部footer就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。方案:eo头部使用oto吸顶,再使用盒子(最小咼度为除头部外的剩余屏幕咼度:域自动撑开,而底部保持不变(fe0a来包住内容(oter和底部tefootdr,这个盒子设置eti盒子里面使用弹性布局(fe1让内容区to这样就有了内容不够时底部自动吸底,内容足够时底部自动下移的效果。示例:tmltitlet实现底CSSfoote0贴底方

2、案:eoteoreeretrootottoflex-flomin-heiflecolowroterfetootetefrofooterfeauto;backgroundfetyle/heabody头和部eadereadercontainer和内和容和-和s=contentotet底和部和-footerfooterfootero优点:底部高度可自由撑开。缺点:低版本浏览器有兼容性(eo)问题方案:底部负距离r内容区设置最小高度铺满页面,然后底部设置等高的负距离示例:CSS实现底部(footer)贴底-方案2:底部负距离marginv/titlebodymargin:0;headerheight:50px;background:#20c997;position:sticky;top:0;.containermin-height:calc(100vh-50px);.contentbackground:#0d6efd;footerheight:50px;margin-top:-50px;background:#fd7e14;headercontentfooter到此这篇关于CSS实现内容高度不够的时候底部(footer)自动贴底的文章就介绍到这了,更多相关CSS底部自动贴底内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 办公文档 > 解决方案

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号