HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML – 粘性页脚和100%高度的内容大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个带有粘性页脚的页面,它的滚动条不会与标题重叠,只有正文.就像我在 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

如果您的页眉和页脚具有可变高度,但这不起作用.

大佬总结

以上是大佬教程为你收集整理的HTML – 粘性页脚和100%高度的内容全部内容,希望文章能够帮你解决HTML – 粘性页脚和100%高度的内容所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。