3

我有一个由 2 列组成的 CSS 布局。左侧的导航栏是一个修复 div。向下滚动右侧列中的主要内容时，它会停留在那里。

当我缩小浏览器窗口或放大时出现问题：水平滚动浏览器窗口时，右侧的主要内容开始与左侧的导航列重叠。

如何修复它，以便无论浏览器窗口的大小或缩放级别是多少，当我水平滚动时，固定的 div 不会重叠，而是将主列推到右侧？

您可以在以下位置看到它：http: //justarandomone.tumblr.com/

所有代码都在源代码中（非常混乱，对此感到抱歉）。

希望有人可以提供帮助。谢谢！

4

4 回答 4

1

您可以为#sidebar 提供纯色背景色（例如白色）；使用 z-index 将其放在堆栈顶部（任何大于右侧 z-index 的数字，例如 1）；此外，您可能希望将#sidebar 拉伸为高度：100%。最后，您可能希望#sidebar 出现覆盖左侧的整个高度，您可以添加“top：0”来实现这一点。

于 2013-01-06T06:57:48.793 回答
1

在我看来，这不是一个真正的问题.. 无论如何，我认为您可以将主要内容块放在 div 中并为其提供绝对定位来解决它。从侧边栏中删除 float:left，这不是必需的。

#container {
    width:751px;
    margin-top:56px;
}

#sidebar {
    width:235px;
    position:fixed;
    top: 0px;
    left: 0px;
}
#content {
    position: absolute;
    top: 0px;
    left: 235px;
    width: 516px; /* 751 -235 */
}
于 2012-04-04T20:32:12.747 回答
0

在将 Chrome 缩小到异常小的窗口大小以及在 iPhone 上时，我能够重新创建。设置侧边栏 divposition:fixed强制它停留在该位置；导致水平滚动问题。

我切换了侧边栏position:absolute，然后同步了top-margin侧边栏和 blogroll，它似乎工作正常。

于 2012-04-04T20:46:05.117 回答
0

可能的建议。使用 css 将 'blogroll' 和 'sidebar' 的高度设置为相同的值（在此示例中我使用了 100%）。他们添加'溢出：自动;' 到“博客”

#sidebar {
    width:235px;
    height:100%;
    float:left;
    clear:both;
    position:fixed;
}

#blogroll {
    width:558px;
    margin-left:290px;
    position:absolute;
    min-height:300px;
    height: 100%;
    overflow:auto;
    padding-bottom:27px;
    padding-top: 171px;
}

这将导致 blogroll 在页面内有自己的滚动条（因此人们会使用它们，并且理论上该页面不会有任何滚动条。为确保将您的正文边距设置为 0 即 ie。应该可以工作。

于 2012-04-04T21:12:17.893 回答