为啥我的侧边栏会向下移动到页面底部而不是停留在侧面？

Posted 2023-02-26

【中文标题】为啥我的侧边栏会向下移动到页面底部而不是停留在侧面？

【英文标题】：Why does my sidebar move down to the bottom of the page rather than stay on the side?为什么我的侧边栏会向下移动到页面底部而不是停留在侧面？

【发布时间】：2011-05-20 10:27:47

【问题描述】：

我有一个网站，右侧有一个博客和侧边栏，看起来不错，但是当我进入博客的第 2 页时，侧边栏会向下移动到页面底部。

您可以通过这些链接了解我的意思

http://www.beatinganger.com/blog（侧边栏看起来正常）

http://www.beatinganger.com/blog?page=1（侧边栏向下移动到底部）

我查看了源代码，发现两页之间的差异没有任何变化。

任何帮助将不胜感激。

【问题讨论】：

不同的是右边的容器div放在page1的左边的容器div里面。请检查代码。

【参考方案1】：

您在子页面上的#left_container 元素没有被关闭，因此#right_container 元素被包含在其中。

【讨论】：

谢谢 - 现在尝试找出解决方法 ;)

【参考方案2】：

容器 div 关闭导致问题（正如其他答案指出的那样）；您的带有 vertical_menu 类的 div 也超出了其分配的大小 - 当您的 div 关闭时，这可能会导致浮动问题：

【讨论】：

感谢 Amelvin，我会尝试解决这个问题 - 不知道为什么会这样，因为 CSS 是一样的，唯一的区别是它使用的是 Drupal 视图。

vertical_menu div 是 300px 宽 - 里面的一些元素溢出了 - 我在上面拉的图像是使用谷歌浏览器的，它可以让你在不必重建页面的情况下调整元素的大小. Firefox 中的 Firebug 也是如此。

【参考方案3】：

是的，第二个 URL 的模板出了点问题，因此侧边栏被注入到左侧的“主”列中。

【参考方案4】：

#right_container http://www.beatinganger.com/blog?page=1 与 enter link description here 位于不同的层次结构中。 #right_container 和 #left_container 应该在第一个链接中显示的相同父级和级别中。

另外一个建议是，我注意到#right_container 的内容比容器本身的内容稍微“宽”一些。确保内容元素小于或等于父容器的宽度，或者设置#right_container -> overflow: hidden;不过，这是一种快速的 hackish 方式。