CSS fixed div。避免不必要的重叠

我有一个由2列组成的CSS布局。左侧的导航栏是修复div。它在列中向右滚动主要内容的同时保持在那里。CSS fixed div。避免不必要的重叠

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

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

你可以看到这是真的：http://justarandomone.tumblr.com/

所有的代码是在源（这是相当混乱，遗憾的是）。

希望有人能帮上忙。谢谢！

来源

2012-04-04 Justa Randomone

我似乎无法重复该问题。这对我来说很好。你查看这个问题的浏览器/版本和操作系统是什么？也许你可以发布问题的屏幕截图或涉及的代码。 – cereallarceny 2012-04-04 20:14:47

不是我认为的问题.. 无论如何，我认为你可以修复它把内容的主要块放在一个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 */ 
}

来源

2012-04-04 20:32:12 Valentino

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

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

来源

2012-04-04 20:46:05

可能的建议。使用CSS将'blogroll'和'sidebar'高度设置为相同的值（本例中我使用了100％）。这些添加'overflow：auto;'为“网志串连”

#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即为应该可以工作

来源

2012-04-04 21:12:17

您可以给#sidebar一个纯色背景（例如白色）;将它放在堆栈顶部，并使用z-index（任何大于z-索引的数字右边，例如1）;另外，您可能想要拉伸高度为100％的#sidebar，最后，您可能希望＃边栏覆盖左侧的整个高度，您可以添加“top： 0“来实现。

来源

2013-01-06 06:57:48 ssssszzzzz

CSS fixed div。避免不必要的重叠

回答

相关问题