0

因此，到目前为止，该站点的大部分内容都使用自动居中（容器和导航具有左/右边距：自动），并且除了页脚之外，一切似乎都很顺利。

当我调整窗口大小时，一切都很好地填充了，除了当我水平滚动时，页脚似乎在右侧被切断。我读过这可能是一个浏览器错误。虽然它出现在 IE 和 chrome 和 firefox 中，所以它可能只是草率的编码（我是一个大新手）。

这是CSS：

 #footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
 }


 /*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
   min-width:1000px;    
   }

/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
    #footerContent ul{
        width:1000px;
    margin-left:auto;
    margin-right:auto;
    }

#footerContent li {float:left; width:250px;  }

重申一下，当浏览器全屏或调整大小时，它可以正常工作。但是在调整大小并使用水平滚动条一直向右滚动后，背景图像就会被切断。

我试过 width:100%, min-width, width:1000px; 但这些似乎都不起作用。

http://postimage.org/image/3so264fnb/

4

1 回答 1

1

关于您对 Stackoverflow 的评论相似

（至少截至 2012 年 4 月 29 日）

stackoverflow 上的问题似乎是footer包含另一个div元素，footerwrap它有一个width: 960px集合，但footer它本身没有宽度设置。Adiv基本上旨在简单地“分组”块级内容。一个常见的误解是 adiv会随着它的内容而扩展。实际上，如果在 parent 上设置了显式div，则 a会扩展到其父级。如果没有，那么它适合浏览器窗口。这就是您（和 stackoverflow）正在经历的。width

要获得div与内容相关的内容width，您必须：

  1. 显式设置容器的widthor min-width。因此，如果 stackoverflow 在 that wraps 上设置一个（min-width: 990pxfooterwrap 的 960px + 每边 15px 的填充），那么它的问题就解决了。footerfooterwrap
  2. 将容器设置div为float，因为浮动元素会包装其内容。

看看这个例子 fiddle。请注意前两个 div 遇到的问题与您看到的相同。如果您在小提琴中缩小或扩大 iframe 窗口的大小，前两个 div 将随之缩小或放大，但仍会在水平滚动条上留下空白空间。第三个和第四个 div 已经应用了我上面的修复。第五个 div 是为了显示内部 div，如果没有定义宽度，将扩展到具有显式width设置的容器的宽度。

作为旁注，它可能有效（我没有在许多浏览器中测试过，但 FF 11 有效）实际上只是在没有设置宽度的情况下将 a 添加float: left到元素中。如本例所示，它似乎可以有效地使前两个 div 的行为与第三个和第四个 div 一样。bodybody

我希望这有帮助。

原始答案

由于缺少一些信息，目前还不清楚可以做什么。以下是一些需要寻找的东西：

  1. 您的background-image宽度是否足够（或者如果需要，它是否可以/是否应该background-repeat: repeat-x应用以使其更宽）？
  2. 您的页脚宽度 ( 1000px) 是否与您的上部内容宽度相匹配？如果页脚被限制为比上部内容区域（或页眉等）允许的范围更窄，那么它的背景将不会对齐。

这是我能做的最好的事情，而无需看到更多页面的 html 和 css，也不知道图像的大小以及您对其功能的意图。

于 2012-04-28T13:39:11.847 回答