Div侧边栏高度和缩放

时间:2012-12-20 20:38:01

标签: css

要进行现场演示,请访问我的网站@ http://hello-world.cu.cc。 请务必查看主页,项目页面和评论页面。这些页面中的每一个都具有相同的侧边栏,并且应用了不同的样式。这是为了向您展示我尝试过的内容及其导致的问题。

我正在制作一个左侧有侧边栏,右侧有主要内容的网站。我遇到的问题是与侧边栏有关。我把它漂浮到左侧,这很好,直到我放大网页,突然侧边栏移动位置,破坏了整个布局。我试图通过将侧边栏的位置设置为绝对位置以及将容器的位置设置为相对位置来解决此问题。现在这解决了缩放问题,因为当我放大它现在它保持在相同的位置。但是,由于该位置现在是绝对的,因此页面不会自动变长以容纳侧边栏。我目前使用的临时解决方案是绝对定位侧边栏以修复缩放问题,然后添加最大高度以及overflow:auto以提供可用于滚动侧边栏的滚动条。

2 个答案:

答案 0 :(得分:0)

你有两件事似乎会导致问题。

  • #header有min-width:100%
  • #main有width:1100px

修复这些问题,你就可以了。

答案 1 :(得分:0)

就像Randy Hunt上面指出的那样,最大的问题是你的#header造成的。我会将这些应用于您的标题:position: absolute; left: 0px; top: 0px;,然后您还需要通过应用正余量来调整当前使用负边距的所有元素。取标头的150px高度并添加负边距以找到新的正边距值(因此-138px的上边距将变为12px)。

另外,min-width: 100%;代替width: 100%; min-width: 1100px;我会做{{1}}或宽度不同的事情。

希望有所帮助。