Viewport width causing background to not show as expected
I am having an issue where the background color is behaving unexpectedly when the viewport is shrunk to a size smaller than that specified for some of my elements. While the scroll bars appear correctly the background is not what I would expect. When the viewport is as large or larger the backgrounds behave as intended. When inspecting the page elements with Firebug it seems that the body element is not stretching even though content inside of it is. What's causing the backgrounds to behave this way?
I've provided what I believe to be the pertinent html and CSS, but if I've omitted something please let me know.
Shrunk Viewport Example
Enlarged Viewport Example
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 73开发者_如何学编程0px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
The reason you're seeing this behaviour is because your width: 100% elements are only taking the viewport width as the amount of background they need to render.
You can fix it by adding a min-width declaration to your body element's CSS. Simply set it to the largest nested element's width:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
min-width is not supported in IE so use the expression
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
/* IE Version */
width:expression(document.body.clientWidth < 730 ? "728px" : "auto" );
}
加载中,请稍侯......
精彩评论