CSS 固定 div。避免不必要的重叠答案

【问题标题】：CSS fixed div. Avoid unwanted overlappingCSS 固定 div。避免不必要的重叠
【发布时间】：2012-04-04 20:11:10
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

我似乎无法复制这个问题。对我来说看起来不错。您在哪个浏览器/版本和操作系统上查看此问题？也许您可以发布问题的屏幕截图或涉及的代码。

标签： css multiple-columns

【解决方案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 */
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我可以在将 Chrome 缩小到异常小的窗口大小时重新创建，并且在 iPhone 上也可以。将侧边栏 div 设置为position:fixed 会强制它停留在该位置；导致水平滚动问题。

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

【讨论】：

【解决方案4】：

可能的建议。使用 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。应该可以。

【讨论】：