web-dev-qa-db-ja.com

ディスプレイの幅だけでなく、コンテンツの幅全体の背景色を持つようにdivをスタイルする方法は？

この質問のために、次のようなHTMLページがあります。

<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>

「非常に長い線」とそのdivの背景色に注意してください。

私の問題（そして基本的なものだと思います）は、背景色が画面の端で止まることです。テキストの残りを表示するために右にスクロールすると、テキストの残りの背景は白になります。

基本的に、divを次のように動作させます。

  1. 指定した背景色を使用するには
  2. 最小限の言葉で画面内のテキストを画面と同じ幅にします
  3. 画面の幅よりも大きい場合、テキストの幅に従う
  4. 必要に応じて（そしてこれは本当に異なる、フォローアップ、質問であることを知っています）、最初の後にそのようなdivが複数ある場合、2つを最も広いdivの幅に自動的に追従させる方法はありますか？

それは理にかなっていますか？

これを行う方法はありますか？

ここにテストページを設定しました。これをiPhoneで表示すると、小さいフォントで問題が表示されます。 http://www.vkarlsen.no/test/test.html

次の質問がSOによる潜在的な重複/提案としてリストされているのを見ました。

csshtmlbackground-color
13
Lasse Vågsæther Karlsen

黒魔術：

<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>

なぜこれが機能するのかについて明確な説明がある場合は、コメントしてください。それは、本文がページ幅に収まらなければならないという制約を取り除くフロートの副作用と関係があると思います。

14
user372719

問題は、block要素は、コンテンツの大きさに関係なく、含まれる要素の100％までしか拡大しないということです。ただし、inline-block要素を作成すると、幅が実際のコンテンツに合わせて明らかに変更されます。

HTML：

<div id="container">
    <div class="wide">
        foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
    </div>
    <div class="wide">
        bar
    </div>
</div>

CSS：

.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }

（container要素は、画面の幅だけでなく、2番目のdivを前の質問と同じ大きさにするための追加の質問に対処します。）

デモコードを示すJSフィドル も設定しました。

inline-blockで問題（特にクロスブラウザの問題）に遭遇した場合、 ディスプレイ内のブロックレベルの要素：inline-block が役立つ場合があります。

7
Jan Pöschko
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }

scrollまたはautoを試すことができます。

1
Joop Eggen

inline-block表示スタイルは、あなたが望むことをするようです。 <nobr>タグは非推奨であり、使用しないでください。 CSSでは、改行なしの空白を使用できます。以下に、スタイルルールの例を変更する方法を示します。

div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }

スタイルシートを変更し、ソースから<nobr>タグを削除して、試してみてください。 display: inline-blockはすべてのブラウザで機能するわけではありませんが、古いブラウザでのみ問題になる傾向があることに注意してください（新しいバージョンではある程度サポートする必要があります）。私個人の意見では、壊れたブラウザのコーディングを無視することです。コードが標準に準拠している場合、主要な最新のブラウザすべてで動作するはずです。まだIE6（またはそれ以前）を使用している人は誰でも苦痛に値します。 :-)

1
Jonah Bishop

これを試して、

.success { background-color: #ccffcc; float:left;}
0
designersvsoft

これは、定義により画面の幅のみに及ぶwidth:100%を設定したためです。画面の幅に設定するmin-width:100%を設定します...それを超えて成長する能力を持ちます。

また、bodyおよびhtmlにmin-width:100%を設定してください。

0
Tomas

幅は体のサイズによって制限されています。ボディの幅を大きくすると、背景色で1行に表示されます。

最小幅を維持するには：min-width：100％

0
Rob

またはこれを試して、

.success { background-color: #ccffcc; overflow:auto;}
0
Sufiyan Ghori