粘性侧边栏和页脚不起作用

Question

我试图使侧面导航栏保持粘性，以便在滚动页面内容时，侧边栏将保持可见（且可滚动），并且不会随页面内容一起滚动。

我还试图仅在页面内容小于屏幕大小时使页脚变粘，否则仅在页面内容结束后才弹出。 （例如这个例子： https : //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ ）

我是一个新手Web开发人员，试图为一个朋友创建一个网站作为项目。 我试图使网站保持响应状态，以便它在手机和不同的计算机分辨率下都能正常工作。

我正在使用Bootstrap 4.0.0-beta3，超棒的字体4.7.0和javascript。

更新 ：我试图使用flexboxes使页脚变粘，但是没有用。

.wrapper {
    display: flex;
    align-items: stretch;
}

我在这里放置了大部分代码的副本，因为在这篇文章中，所有代码都写得有点大。： https ://jsbin.com/xabisiq/edit?html,css,js,output

先感谢您！

Answer 1

好吧，让我们一步一步走。

侧杆发粘，位置固定

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知道也不关心顶部的nav元素，您必须告诉它留出一些空间，否则您将无法查看该元素。

现在，您必须使用以下命令告诉页面的主要内容并为sidebar腾出空间：

.wrapper {
    padding-left: 250px; //size of #sidebar
}

快照

通过flex粘贴的页脚

对于这种情况，我只是在该链接中添加了可用的CSS规则。 真的很棒！

body{
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}

#main-Body-Head { flex:1;  }

快照

就是这样。

问题？

好吧，事实上，当您向下滚动时，您会看到侧边栏将在页脚上滚动。 这将需要解决。 同样，当您按下箭头时，边栏也会向右移动，您需要相应地调整主体的填充。 希望这对您有所帮助！

我推荐我曾经读过的关于CSS的最好的书：Andy Budd的CSS精通。