當用戶水平滾動時，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