wake-up-neo.com

Wie kann man ein Div so stylen, dass es eine Hintergrundfarbe für die gesamte Breite des Inhalts und nicht nur für die Breite der Anzeige hat?

Ich habe eine HTML-Seite, die für diese Frage so aussieht:

<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>

Beachten Sie die "sehr lange Linie" und die Hintergrundfarbe dieses div.

Mein Problem (und ich wette, es ist ein grundlegendes) ist, dass die Hintergrundfarbe am Rand des Bildschirms stoppt. Wenn ich nach rechts scrolle, um den Rest des Texts zu sehen, ist der restliche Texthintergrund weiß.

Grundsätzlich möchte ich, dass sich mein div so verhält:

  1. Die angegebene Hintergrundfarbe haben
  2. Mindestens die gleiche Breite wie der Bildschirm haben, auch wenn der Text nur aus wenigen Wörtern besteht
  3. Um der Breite des Texts zu folgen, wenn dieser größer als die Breite des Bildschirms ist
  4. Optional (und ich weiß, dass dies wirklich eine andere Folgefrage ist), gibt es eine Möglichkeit, wenn ich mehr als ein solches Div habe, das dem ersten folgt, die beiden automatisch der Breite des breitesten Div folgen zu lassen?

Hat das einen Sinn ergeben?

Gibt es eine Möglichkeit, dies zu tun?

Ich habe hier eine Testseite eingerichtet, die, wenn Sie diese auf dem iPhone anzeigen, obwohl eine kleine Schrift, das Problem anzeigt: http://www.vkarlsen.no/test/test.html

Ich habe die folgenden Fragen als mögliche Duplikate/Vorschläge von SO gesehen. Folgendes ist mir aufgefallen, als ich die folgenden Informationen ausprobiert habe:

csshtmlbackground-color
13
Lasse Vågsæther Karlsen

schwarze Magie:

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

Wenn jemand eine klare Erklärung hat, warum dies funktioniert, kommentieren Sie bitte. Ich denke, es hat etwas mit einem Nebeneffekt des Floats zu tun, der die Einschränkung beseitigt, dass der Körper in die Seitenbreite passen muss.

14
user372719

Das Problem scheint zu sein, dass block -Elemente nur bis zu 100% ihres enthaltenen Elements skalieren, egal wie groß ihr Inhalt ist - es läuft einfach über. Wenn Sie sie jedoch zu inline-block - Elementen machen, wird ihre Breite anscheinend an den tatsächlichen Inhalt angepasst.

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; }

(Das containerElement beantwortet Ihre nachfolgende Frage, um das zweite div so groß wie das vorherige zu machen und nicht nur die Bildschirmbreite.)

Ich habe auch eine JS-Geige eingerichtet, die meinen Demo-Code zeigt .

Wenn Sie mit inline-block Auf Probleme stoßen (insbesondere bei browserübergreifenden Problemen), sehen Sie sich Elemente auf Blockebene in der Anzeige an: Inline-Block könnte helfen.

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

Sie können scroll oder auto versuchen.

1
Joop Eggen

Das inline-block Anzeigestil scheint zu tun, was Sie wollen. Notiere dass der <nobr> -Tag ist veraltet und sollte nicht verwendet werden. In CSS ist ein nicht unterbrechender Leerraum möglich. So würde ich Ihre Beispielstilregeln ändern:

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

Ändere dein Stylesheet, entferne das <nobr>-Tags aus Ihrer Quelle und probieren Sie es aus. Beachten Sie, dass display: inline-block funktioniert nicht in allen Browsern, obwohl es in älteren Browsern eher problematisch ist (neuere Versionen sollten es bis zu einem gewissen Grad unterstützen). Meine persönliche Meinung ist, Codierung für defekte Browser zu ignorieren. Wenn Ihr Code standardkonform ist, sollte er in allen gängigen modernen Browsern funktionieren. Jeder, der noch IE6 (oder früher) verwendet, verdient den Schmerz. :-)

1
Jonah Bishop

Versuche dies,

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

Es liegt daran, dass Sie das width:100%, der sich per definitionem nur über die Breite des Bildschirms erstreckt. Sie möchten das min-width:100% was es auf die Breite des Bildschirms einstellt ... mit der Fähigkeit darüber hinaus zu wachsen.

Stellen Sie außerdem sicher, dass Sie min-width:100% für body und html.

0
Tomas

Die Breite wird durch die Körpergröße begrenzt. Wenn Sie die Breite des Körpers vergrößern, bleibt dieser auf einer Linie mit der Hintergrundfarbe.

Mindestbreite einhalten: Mindestbreite: 100%

0
Rob

oder versuchen Sie es,

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