100% 宽度标题无法填充浏览器
当浏览器窗口足够小以强制水平滚动条并且向右滚动时，标题的背景颜色会在浏览器边缘之前结束。 我正在使用 css 类。
.s_header {
margin: 0;
width: 100%;
display: block;
border-bottom: 1px solid #000;
background-color:#b8dbec;
height:133px;
}
.s_header 类中包含溢出：可见，但没有成功。正文宽度也设置为 100% margin 0
有没有一种简单的方法可以让背景在滚动条出现时向右延伸？
问题页面位于此处
任何建议将不胜感激。
When the browser window is small enough to force a horizontal scrollbar and you scroll right the background color of the header ends before the edge of the browser. I am using a css class.
.s_header {
margin: 0;
width: 100%;
display: block;
border-bottom: 1px solid #000;
background-color:#b8dbec;
height:133px;
}
The contents of <div class="s_header"> are not as wide as the 4 column table below it where the content totals abot 840px with image widths+padding and a 140px fixed width column. So when the browser window is less than 840px there is a horizontal scrollbar which is ok except that the background of the header is cut off when you scroll.
The parent elements of <div class="s_header"> are body and html for which 100% width means the window width. I've tried including overflow:visible in .s_header class without success.
The body width is also set to 100% margin 0
Is there a simple way that I can get the background to extend on the right when a scrollbar appears?
The problem page is at here
Any suggestions will be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
设置 body 标签的边距
以内联方式设置
在 style.css （或其他）中
set the margins of your body tag
The in-line way
In your style.css (or whatever)
我衷心建议您使用 Firefox 并安装 firebug：
http://getfirebug.com/
它有一个很酷的功能，可以让你检查 dom 元素，它会告诉你所有样式，以及它们源自哪个样式表。 因此，如果主体继承了一些错误的填充（或其他东西），您将能够直观地看到发生了什么:-)
I wholeheartedly suggest that you use firefox and install firebug:
http://getfirebug.com/
It has this cool feature that lets you inspect a dom element, and it will tell you all styles, and what stylesheet they originate from. So if the body is inheriting some errant padding (or something), you will be able to see visually what's going on :-)
看起来问题在于正文表中的三张图像。 当您减小浏览器宽度时，会导致三个图像聚集在一起，位于单独的表格单元格中，它们无法换行，从而导致固定宽度。
您可以尝试通过使用重复的标题背景图像来伪造解决方案，但我会使用浮动方法重写表结构。
It looks like the issue is down to the three images in the body table. When you reduces the browser width it causes the three image so bunch up, being in individual table cells they can not wrap resulting in a fixed width.
You could try to fudge the solution by using a repeating background image for the header, but I would re-write the table structure with a floating approach.
我的[非常简单][可能很难看]解决方案：
min-width属性：1440/16 = 90
你的 CSS 必须如下所示：
html {随便}主体{最小宽度：100%;}
.minwidth {最小宽度：90em;宽度：100%;}
最后 3. 将
.minwidth类应用于所有身体较大的孩子，身体尺寸必须为 100% 宽度。调整您的浏览器窗口和/或更改分辨率，您应该已经摆脱了所有屏幕分辨率高达 1440*900 的恼人问题
希望我可以提供帮助
My [very simple] [and probably ugly] solution :
min-widthproperty based on the following calculation:1440/16 = 90
your CSS must then look like this:
html {whatever}body {min-width: 100%;}
.minwidth {min-width:90em;width:100%;}
Finally 3. apply the
.minwidthclass to all body elder children having to be 100% body size wide.Rezise your browser window and/or change the resolution, you should have get rid of this annoying problem for all screen resolutions up to 1440*900
Hope I could help
更简单的方法是创建一个内部 div 并将其设置为与滚动条出现之前页面相同的宽度示例
easier way is to create an inner div and set it to the same width as the page goes just before the scrollbar appears example