Question

请查看此网站：

http://www.imageworkz.asia/cranium

尝试将窗口调整到如此小，以至于出现水平滚动条。将水平滚动条向右拖动，然后出现问题。页眉和页脚似乎没有相应调整。在css中，页眉和页脚元素的宽度为100％。

有关如何解决此问题的任何想法？谢谢！

Answer 1

这就是100％宽度的工作原理。元素的宽度与父元素相同，因为有一个滚动条，它比页面更窄。

Answer 2

我没有看到问题，但如果您希望标题调整大小，我建议使用媒体查询根据屏幕大小进行调整。

Media Query Examples

Answer 3

您的文章元素具有固定的宽度，因此当容器缩小时它会溢出容器。您可以尝试浮动容器div，这应该确保它不会缩小。

<div id="container" style="display: block; float: left">

Answer 4

您需要将CSS3多个背景图像用于'body'元素，然后使用CSS3 PIE使其在IE http://css3pie.com/documentation/supported-css3-features/#pie-background中运行

body{
    background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
    -pie-background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
    behavior: url(PIE.htc);
}

请记住-pie-background 相对于HTML而不是CSS 这肯定会解决你的问题。

标头不符合100％宽度

4 个答案: