HTML – 粘性页脚和100%高度的内容
发布时间:2020-12-14 16:35:01 所属栏目:资源 来源:网络整理
导读:我想要一个带有粘性页脚的页面,它的滚动条不会与标题重叠,只有正文.就像我在 this fiddle年做的那样.但是现在我想要的内容(虚线框)有100%的身高. HTML div class="navbar navbar-inverse navbar-fixed-top"/divdiv class="container" div class="content-co
我想要一个带有粘性页脚的页面,它的滚动条不会与标题重叠,只有正文.就像我在
this fiddle年做的那样.但是现在我想要的内容(虚线框)有100%的身高.
HTML <div class="navbar navbar-inverse navbar-fixed-top"></div> <div class="container"> <div class="content-container"> <div class="my_content">Full height ??</div> <div class="push"></div> </div> <div class="footer"></div> </div> CSS html,body { height: 100%; overflow: hidden; } body { padding-top: 50px; } .container { overflow-y: auto; overflow-x: hidden; height: 100%; } .content-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; position: relative; padding-top: 15px; padding-bottom: 15px; min-height: 100%; margin-bottom: -60px; } .footer { position: relative; width: 100%; background-color: red; } .footer,.push { height: 60px; } .my_content { border: 1px dotted; width: 100%; height: 100%; min-height: 200px; min-width: 300px; } 您可以建议使用粘性页脚的任何其他模板. 解决方法
您可以将.my_content设置为视口高度的100%减去页面上其他元素的高度和(垂直)填充(即页眉高度,页脚高度,.content-container上的顶部和底部填充),如下所示:
.my_content { min-height: calc(100vh - 140px); } DEMO 如果您的页眉和页脚具有可变高度,但这不起作用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |