Background-color of div does not display beyond initial view when user scrolls horizontally
Question
I have a banner at the top of my webpage, which needs to span the width of the user's screen. If the content beneath the banner is wider than the user's screen the banner needs to extend to be as wide as the content below so that it's visible when the user scrolls horizontally.
My webpage appears to display fine on desktops that I've tried having ie, firefox, and safari. It also displays fine on Android phones. However, it does not display properly on iPhone.
I've tried stripping the webpage down to something easy to follow in order to get to the crux of the issue. Interestingly, this bare-bones page exhibits the display issue in Android too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#graphic_top {width: 100%; height: 48px; background-color: #637768;}
</style>
</head>
<body>
<div id="graphic_top"> <!-- displays a green banner across the top -->
<div style="width: 890px; margin: 0 auto;">
<p>Scroll horizontally on an iPhone or Android phone and you will see that the green background-color
in "graphic_top" does not extend beyond the width of the device's screen.
</p>
</div>
</div>
</body>
</html>
I think I understand the cause of this issue. The div "graphic_top" is declared to have a width of 100%. Apparently this is 100% of the device's width.
Is there a way to make the div expand horizontally to fit the content within?
1 answers
solution1
1 ACCPTED 2011-03-25 17:45:38
如果您将#graphic_top更改为使用min-width：890px而不是100％，则它会一直沿用，但对于台式机而言仍会更宽。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.