html – 主要内容后面的粘性页脚,滚动时可见_html-js-css

概述我想重新创建这个在 http://www.akc.org/dog-breeds/发现的粘性效应 >我知道页脚必须修复. >我知道内容需要更高的z-index >我猜测(某种程度上)身体需要有一个底边,它等于页脚的高度??? 请有人帮助我. 我正在使用Twitter Bootstrap 4.一般标记如下所示： <body> <div class="container"> <!-- This 我想重新创建这个在 http://www.akc.org/dog-breeds/发现的粘性效应

>我知道页脚必须修复.
>我知道内容需要更高的z-index
>我猜测(某种程度上)身体需要有一个底边,它等于页脚的高度???

请有人帮助我.

我正在使用Twitter bootstrap 4.一般标记如下所示：

<body>    <div > <!-- This part should scroll up to reveal the footer below -->        <!-- Content goes in here -->    </div>    <footer > <!-- This should be hIDden initially -->        <div >            <div >                <!-- Footer stuff goes in here -->            </div>        </div>    </footer></body>

解决方法你会想要添加一个主内容div,然后给这个div一个你想要你的页面的背景颜色,否则你最终会有文本重叠但是你是对的你会想要给你的主要内容div一个z -index为1或者其他什么然后修改你的页脚,然后给它一个小于我示例中的z-index,我给它一个z-index为-1.然后,您的主要内容div将滚动页脚顶部.你可能想要给你的页脚一个高度,你的身体是一个相同高度的填充底部.

这是我如何做到Fiddle Demo的一个例子：

HTML：

<div >  <div >    <div >      Your main Content Scroll down    </div>  </div></div><footer>  <div Class="container">    <div CLass="row">      Footer Content    </div>  </div></footer>

CSS：

body{  padding-bottom:200px;}.main-content{  min-height:200vh;  background:#fff;  z-index:1;}footer{  position:fixed;  bottom:0;  left:0;  wIDth:100%;  height:200px;  background:#000;  color:#fff;  z-index:-1;}

总结

以上是内存溢出为你收集整理的html – 主要内容后面的粘性页脚,滚动时可见全部内容，希望文章能够帮你解决html – 主要内容后面的粘性页脚,滚动时可见所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/1070711.html