我正在尝试使我的侧边导航栏具有粘性，以便当您滚动页面内容时，侧边栏将保持可见（和可滚动）并且不会随页面内容一起滚动。
我也试图让我的页脚只有在页面内容小于屏幕尺寸时才具有粘性，否则它只会在页面内容结束后弹出。（像这个例子：https : //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/）
我是一名网络开发新手，正在尝试为朋友制作网站作为项目。我正在努力使网站保持响应，以便它在手机和不同的计算机分辨率上都能很好地工作。
我正在使用 Bootstrap 4.0.0-beta3、font-awesome 4.7.0 和 javascript。
更新：我尝试使用 flexboxes 使页脚具有粘性，但没有用。
.wrapper {
display: flex;
align-items: stretch;
}
我在这里放了我的大部分代码的副本，因为在这篇文章中写出来的内容有点大。：https ://jsbin.com/xabisiq/edit?html,css,js,output
先感谢您！
好的，让我们一步一步来。
固定位置的侧栏粘性
当你给予一些东西时，position:fixed你必须明白你是在把元素从正常流动的流动中取出来。它将不再在其指定位置渲染。在 的情况下fixed，它在滚动时不会移动，而是位于其他元素之上。有点像如果你拿起你的电脑显示器并在它的一角贴上一张黄色便签，字面意思。显示器中的所有元素都会渲染和移动，您的便签永远留在那里，在每个人之上。那么你如何设法查看它背后的元素呢？好吧，你必须给他们 CSS 规则来强制他们考虑fixed元素的空间，因为他们自己再也看不到那个元素了。我希望这不会太令人困惑。
HTML
将侧边栏 HTML 移出该父 div 容器 #main-Body-Head
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">...</nav>
<nav id="sidebar">...</nav>
<div class="container" id="main-Body-Head">...</div>
给出适当的规则：
#sidebar {
position: fixed;
left: 0;
top: 61px; //size of top nav
}
看看我如何对top零件进行硬编码？那是因为不sidebar知道也不关心顶部导航元素，您必须告诉它给它一些空间，否则您将无法查看该元素。
现在您必须告诉页面的主要内容移动并为以下内容腾出空间sidebar：
.wrapper {
padding-left: 250px; //size of #sidebar
}
通过 flex 具有粘性的页脚
对于这种情况，我只是添加了该精彩链接中可用的 CSS 规则。真的很棒的帖子！
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main-Body-Head { flex:1; }
真的是这样。
问题？
好吧，事实上，当您向下滚动时，您会看到侧边栏将在页脚上滚动。这将需要修复。此外，当您 git 箭头和侧边栏向右移动时，您需要相应地调整主体的填充。希望这有帮助！
我推荐我读过的关于 CSS 的最好的书：Andy Budd 的 CSS mastery。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句