Question

我试图让我的侧面导航栏变粘，这样当您滚动页面内容时，侧边栏将保持可见（和可滚动），而不是滚动页面内容。

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

我是一名新手网络开发人员，试图为朋友创建一个网站作为项目。我试图保持网站的响应能力，以便它在移动设备和不同的计算机分辨率上运行良好。

我正在使用Bootstrap 4.0.0-beta3，font-awesome 4.7.0和javascript。

更新：我尝试使用flexbox来使页脚变粘，但它不起作用。

.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不知道也不关心顶部导航元素，你必须告诉它给它一些空间，否则你将无法查看该元素。

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

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

Snapshot

具有粘性通过弯曲的页脚

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

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

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

Snapshot

真的是这样的。

<强>问题吗

好吧，当你向下滚动时，你会看到你的侧栏会滚动你的页脚。这需要修复。此外，当您git箭头并且侧边栏向右移动时，您需要相应地调整主体的填充。希望这有帮助！

我推荐我读过的关于CSS的最好的书：Andy Budd的CSS掌握。

粘滞侧边栏和页脚无法正常工作

1 个答案: