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

Question

我的网页顶部有一个横幅，该横幅需要跨越用户屏幕的宽度。 如果横幅下面的内容比用户的屏幕宽，则横幅需要扩展到与下面的内容一样宽，以便在用户水平滚动时可见。

我的网页在尝试安装了Firefox和Safari的台式机上显示正常。 在Android手机上也可以正常显示。 但是，它无法在iPhone上正确显示。

我试图将网页简化为易于理解的地方，以解决问题的症结所在。 有趣的是，这个基本页面也显示了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>

我认为我了解此问题的原因。 div“ graphic_top”声明为100％的宽度。 显然，这是设备宽度的100％。

有没有办法使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