当窗口调整大小时，页脚的背景图案获取截止 [英] Footer's background pattern gets cuttoff when window is resized

问题描述

所以大部分的这个网站到目前为止使用自动对中（容器和导航有左/右：汽车）和东西看起来一切顺利，除了脚注除外。

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

这里是css：

  #footer {
 background-image：url（../ Images / footer_bg.jpg）; 
 color：white; 
 height：300px; 
 padding-top：20px; 
} 
 
 
 / *我有4个标题，我想水平并排显示* / 
 #footerContent {
 min-width ：1000px; 
} 
 
 / *所以我试着浮动< li>里面< ul>并限制其宽度，这工作很好* / 
 #footerContent ul {
 width：1000px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 #footerContent li {float：left; width：250px; } 
  

只是重申，当浏览器全屏或调整大小时，它工作正常。但是在你调整大小后，你使用水平滚动条向右滚动，然后背景图像被切断。

我试过宽度：100％，min-width，width：1000px;但没有一个似乎工作。

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

解决方案

关于您对Stackoverflow的评论是类似的

（至少截至4-29-2012）

stackoverflow的问题似乎是 footer 包含另一个 div 元素， footerwrap ，有一个 width：960px 设置为它，但 footer 本身没有宽度设置。 div 是基本设计为简单地分组块级内容。这是一个常见的误解，一个 div 扩展它的内容。实际上，如果在父级上设置了显式的 width ，则 div 。如果没有，则它适合浏览器窗口。这是你（和stackoverflow）遇到的。

获得 div c $ c> width ，您必须：

1. 显式设置或 min-width 。所以，如果stackoverflow在 footer上设置 min-width：990px​​ （每边的960px的footerwrap +填充15px） $ c $ / code>到 float ，作为浮动元素包装其内容。



查看这个例子中的小提琴。注意前两个div的体验同样的问题，你看到。如果缩小或扩大了小提示中的iframe窗口的大小，则前两个div将与其缩小或放大，但仍在水平滚动上留空白。第三和第四个div已经应用我的修复。第五个div是为了显示一个事实，如果没有定义宽度，内部div将扩展到一个显式的 width 设置的容器的宽度。

注意，它可能工作（我没有在许多浏览器测试，但FF 11工作）实际上只是添加一个 float：left <在 body 没有设置宽度的情况下，code>到 body 由于此示例显示，它似乎是有效的导致前两个div的行为就像第三

p>

这有点不清楚可以做什么，因为有一些信息缺乏。以下是一些要查找的内容：

1. 您的 background-image （或者如果需要，可以/应该应用 background-repeat：repeat-x 使其更宽）？


2. 您的页脚宽度（ 1000px ）符合您的上限内容宽度？如果页脚比上限内容区域（或标题等）更窄，则其背景将不会对齐。

这是我能做的最好的，没有看到更多的HTML和CSS的页面，而不知道图像的大小和你的意图如何运作。

So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.

When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).

Here is the 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;  }

Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.

I've tried width:100%, min-width, width:1000px; but none of those seemed to work.

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

解决方案

Regarding your comment about Stackoverflow being similar

(at least as of 4-29-2012)

The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.

To get the div to relate to the content width, you must either:

1. Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
2. Set the container div to float, as a floated element wraps its content.

Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.

As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.

I hope this helps.

Original Answer

It is a little unclear what can be done because there is some information lacking. Here are some things to look for:

1. Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
2. Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.

That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.

这篇关于当窗口调整大小时，页脚的背景图案获取截止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！