content outgrows div 100％

私は現在、画面全体の100％幅のdivを作成しようとしています。そして、私はコードを書くことでそれをやった：content outgrows div 100％

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 

<head> 
    <title>100% width</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <style type="text/css"> 
     html,body { 
      padding:0px; 
      margin:0px; 
      width:100%; 
     } 
    </style> 

</head> 

<body> 

    <div style="background-color:yellow;"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 

</body> 

</html>

これは、通常のズーム設定で正常に動作しますが、私は（Firefoxの6.0.2）で最大ズームを行うときにdivの内側の文字が黄色のボックスをoutgrows。黄色いボックスがウィンドウの終わりまで伸びる方法はありますか？

ありがとうございました。

出典

2011-09-22 html beginner 83

を使用してdivの国境を越えて行くコンテンツを非表示にしてみてください可能性があり、それは本当に重要ですか？ – Ben

divにcssだけを置き、htmlとbodyを削除するとどうなりますか？ – cgatian

あなたがでラップするために本当に長い単語を強制することができます：あなたのdivのスタイルで

word-wrap: break-word;

。

最大ズームではどうなるのですか？

出典

2011-09-22 02:16:12 Ben

私はそうは思わない。私が達成しようとしているのは、http://news.yahoo.com/のようなものです。最大レベルまでズームインまたはズームアウトしても、すべてが完全に同じに見えます。要素が元の位置から外れることはありません。 http://news.google.com/と対照的に、最大ズームでは「more」というテキストが「Sign in」と重なって表示されます。これがどのように達成できるかについてのアイデアはありますか？ –

忍耐と実験で達成することができます。申し訳ありませんが、それほど助けとなるわけではありません。ヤフーがサイトの他の部分と適切に縮尺を変えているのに対し、Googleが1つの絶対位置を使用し、バーの幅が最大ズーム時にブラウザの幅に縮小するため、Googleが崩壊する理由は – Ben

オプション1 黄色いボックス内にテキストを残しておきたい場合は、このCSSスタイリングを追加してみてください。

div {word-wrap: break-word;}

これは、テキストを続行するのではなく次の行に移動させます。

オプション2 か、CSSスタイルに

div {overflow:hidden;}

出典

2011-09-22 02:20:53 TryHarder

オプション1で！ – TryHarder

答えて

関連する問題