Html 可滚动侧边栏中的Flexbox粘性页脚
我有一个移动侧边栏，它的页脚应该贴在底部，但是当有很多导航链接时，页脚会被向下推，你必须滚动才能看到它 这里有一个简化的演示，展示了已经扩展到内容上的侧边栏。您可以看到页脚粘在侧边栏的底部，没有被额外的链接压下，滚动时页脚仍然与链接重叠 正文{背景：CCC；} 配菜{ 位置：固定； 排名：0； 左：0； 底部：0； 宽度：200px； 背景：FFF； 盒影：0 20px 000； 显示器：flex； 弯曲方向：立柱； 溢出：自动； 高度：100vh； } 侧菜单标题， 侧菜单页脚{ 弹性收缩：0； 背景色：天蓝色； 填充：0.5雷姆； } 侧菜单导航{ 柔性生长：1； 显示器：flex； 弯曲方向：立柱； } 侧菜单导航a{ 填充：0.5雷姆； } 页脚Html 可滚动侧边栏中的Flexbox粘性页脚,html,css,flexbox,Html,Css,Flexbox,我有一个移动侧边栏，它的页脚应该贴在底部，但是当有很多导航链接时，页脚会被向下推，你必须滚动才能看到它 这里有一个简化的演示，展示了已经扩展到内容上的侧边栏。您可以看到页脚粘在侧边栏的底部，没有被额外的链接压下，滚动时页脚仍然与链接重叠 正文{背景：CCC；} 配菜{ 位置：固定； 排名：0； 左：0； 底部：0； 宽度：200px； 背景：FFF； 盒影：0 20px 000； 显示器：flex； 弯曲方向：立柱； 溢出：自动； 高度：100vh； } 侧菜单标题， 侧菜单页脚{ 弹性收缩：
这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 据我所知，您希望侧边栏的页眉和页脚保持粘性。只需给侧菜单nav一个overflow:auto或overflow-y:scroll，这样元素就可以放在页眉和页脚之间 正文{背景：CCC；} 配菜{ 位置：固定； 排名：0； 左：0； 底部：0； 宽度：200px； 背景：FFF； 盒影：0 20px 000； 显示器：flex； 弯曲方向：立柱； 溢出：自动； 高度：100vh； } 侧菜单标题， 侧菜单页脚{ 弹性收缩：0； 背景色：天蓝色； 填充：0.5雷姆； } 侧菜单导航{ 柔性生长：1； 显示器：flex； 弯曲方向：立柱； 溢出：自动； } 侧菜单导航a{ 填充：0.5雷姆； } 页脚 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 您的侧菜单导航也需要具有flex shrink:0；，否则它将收缩以适合其父对象 堆栈片段 正文{背景：CCC；} 配菜{ 位置：固定； 排名：0； 左：0； 底部：0； 宽度：200px； 背景：FFF； 盒影：0 20px 000； 显示器：flex； 弯曲方向：立柱； 溢出：自动； 高度：100vh； } 侧菜单标题， 侧菜单页脚{ 弹性收缩：0； 背景色：天蓝色； 填充：0.5雷姆； } 侧菜单导航{ 弹性收缩：0； 柔性生长：1； 显示器：flex； 弯曲方向：立柱； } 侧菜单导航a{ 填充：0.5雷姆； } 页脚
这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 这里有很多内容哦，是的，有很多内容 嗨，克里斯，你真的需要使用flexbox吗？在这种情况下，似乎根本不需要使用flexbox就可以做到这一点可能是真的。。。但一开始似乎是一个很好的flexbox用例。我想我可以不使用@CROSP来尝试，如果启用侧菜单导航来填充
剩余空间当没有足够的链接迫使其滚动时，需要Flexbox将页脚保持在其父项的底部，即所谓的“粘性页脚”。@ChrisBarr，是的，我知道你的意图。你已经有了正确的答案这不是我要问的，我不想只在导航上有一个内部滚动条，我希望整个侧边栏都可以滚动，并且当有很多链接时，页脚可以从底部推开。gson速度更快。非常有趣。我知道我遗漏了一些简单的东西，谢谢你的解释！我显然读错了粘性的定义。我认为当父对象出现在屏幕上时，sticky的行为类似于绝对，当父对象滚动出视口时，sticky与父对象保持一致。@AndreiGheorghiu它可以是，例如，当使用位置：sticky。。。然而，所谓的粘性页脚，通常意味着要么粘在其父窗口的底部，要么在其父窗口溢出并需要滚动时粘在其父窗口内容的底部。