Question

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

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

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

您可以在http://justarandomone.tumblr.com/

中看到它

所有代码都在源代码中（非常混乱，对不起）。

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

Answer 1

在我看来并不是真正的问题.. 无论如何，我认为你可以修复它将主要内容块放在div中并赋予它绝对定位。从边栏移除浮动：左边，没有必要。

#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 */
}

Answer 2

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

Answer 3

我可以在将Chrome缩小到异常小的窗口尺寸以及iPhone时重新创建。将侧边栏div设置为position:fixed会强制它保持在该位置;导致水平滚动问题。

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

Answer 4

可能的建议。使用css将'blogroll'和'sidebar'高度设置为相同的值（在本例中我使用了100％）。添加'overflow：auto;'到'blogroll'

#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。应该工作。

CSS固定div。避免意外重叠

4 个答案: