滚动条切断div背景 [英] scrollbar cutting off div background

问题描述

每当我的网站以不足以显示整个网页的分辨率观看时，就会添加一个水平滚动条。问题是，我的100％宽度与背景图像的div不应用此背景图像到延伸超出滚动条的部分。

同样的问题也出现在Stack Overflow。如果你缩小窗口足够小，你有一个水平滚动条，你可以看到，页眉和页脚div区域不扩展背景图像/颜色。

我想要解决这个问题的一种方法是将header / footer div设置为fixed，但是超过div结尾的内容会丢失： - （

任何人都有任何建议或解决方法？ty！

解决方案

将元素设置为100％宽度，它将具有与其父元素相同的宽度body标记的宽度默认为视口的宽度根据标准，当元素内容大到适合它，它会溢出。这是你看到的。

为了解决这个问题，在body标签上设置min-width，类似下面的东西，为您工作：

  body {
 min-width：960px; 
} 
  

Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.

This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.

One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(

Anyone have any suggestions or a workaround? ty!

解决方案

When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.

To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:

body {
    min-width: 960px;
}

这篇关于滚动条切断div背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！