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 个答案: