Auto width div background + vertical scroll
Picture a site with a banner of varying height at the to开发者_开发知识库p of a page,
Below that, div#wrapper-inside inside div#wrapper
#wrapper-inside is of fixed width and centered
#wrapper has a big background-image
Now. When the browser viewport width is smaller than our #wrapper-inside, we get a nice horizontal scrollbar, and when we scroll to the left, you'll notice that #wrapper's width stays the same as the browser viewport width.
The problem is that #wrapper scrolls along and the background-image gets cut off.
Can this be fixed with css alone, if not, jQuery?
What about setting #wrapper min-width to the same fixed width as the wrapper-inside.
it can be done with only css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#wrapper {
overflow: auto;
background-image: url('http://fc05.deviantart.net/fs50/f/2009/340/b/0/Me_by_dicabrio.png');
}
</style>
</head>
<body>
<div id="header">
bla bla
</div>
<div id="wrapper">
<div id="wrapper-inner" style="width: 2000px; border: 1px solid black;height: 100px; color: white;">
test;test;test;test;test;test;test;test;test;test;test;test;test;test;test;
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论