0

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

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

4

2 回答 2

0

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

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

修好这些,你就可以上路了。

于 2012-12-20T21:39:09.567 回答
0

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

另外,min-width: 100%;我不会做类似width: 100%; min-width: 1100px;或任何宽度的事情。

希望有帮助。

于 2012-12-21T19:32:01.570 回答