当用户水平滚动时，div的背景色不会超出初始视图

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. 我的网页在尝试安装了Firefox和Safari的台式机上显示正常。 It also displays fine on Android phones. 在Android手机上也可以正常显示。 However, it does not display properly on iPhone. 但是，它无法在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. 有趣的是，这个基本页面也显示了Android中的显示问题。

<!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%. div“ graphic_top”声明为100％的宽度。 Apparently this is 100% of the device's width. 显然，这是设备宽度的100％。

Is there a way to make the div expand horizontally to fit the content within? 有没有办法使div水平扩展以适合其中的内容？

Answer 1

如果您将#graphic_top更改为使用min-width：890px而不是100％，则它会一直沿用，但对于台式机而言仍会更宽。

当用户水平滚动时，div的背景色不会超出初始视图

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-03-25 17:45:38

当用户水平滚动时，div的背景色不会超出初始视图

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-03-25 17:45:38

解决方案1
1 已采纳 2011-03-25 17:45:38