web-dev-qa-db-fra.com

Comment styliser un div pour avoir une couleur d'arrière-plan pour toute la largeur du contenu, et pas seulement pour la largeur de l'affichage?

J'ai une page HTML qui pour cette question ressemble à ceci:

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

Notez la "très longue ligne" et la couleur d'arrière-plan de cette div.

Mon problème (et je parie que c'est un problème de base) est que la couleur d'arrière-plan s'arrête au bord de l'écran. Lorsque je fais défiler vers la droite pour voir le reste du texte, le reste de l'arrière-plan du texte est blanc.

Fondamentalement, je veux que ma div se comporte comme ceci:

  1. Pour avoir la couleur d'arrière-plan spécifiée
  2. Pour avoir au minimum la même largeur que l'écran, même si le texte ne contient que quelques mots
  3. Pour suivre la largeur du texte, si elle est supérieure à la largeur de l'écran
  4. Facultativement (et je sais que c'est vraiment une question de suivi différente), si j'ai plus d'un div, après le premier, existe-t-il un moyen de faire en sorte que les deux suivent automatiquement la largeur du div le plus large?

Cela avait-il un sens?

Est-ce qu'il y a un moyen de faire ça?

J'ai mis en place une page de test ici, qui, si vous la voyez sur iPhone, bien qu'une petite police, montre le problème: http://www.vkarlsen.no/test/test.html

J'ai vu les questions suivantes répertoriées comme des doublons/suggestions potentiels par SO, voici ce que j'ai remarqué lorsque j'ai essayé les informations dans:

csshtmlbackground-color
13
Lasse Vågsæther Karlsen

magie noire:

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

Si quelqu'un a une explication claire de pourquoi cela fonctionne, veuillez commenter. Je pense que cela a quelque chose à voir avec un effet secondaire du flotteur qui supprime la contrainte que le corps doit tenir dans la largeur de la page.

14
user372719

Le problème semble être que les éléments block n'augmentent que jusqu'à 100% de leur élément conteneur, quelle que soit la taille de leur contenu - il déborde juste. Cependant, ce qui les rend inline-block les éléments redimensionnent apparemment leur largeur à leur contenu réel.

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

(L'élément container répond à votre question de suivi pour rendre le second div aussi grand que le précédent, et pas seulement la largeur de l'écran.)

J'ai également mis en place un violon JS montrant mon code de démonstration .

Si vous rencontrez des problèmes (en particulier des problèmes de navigateur) avec inline-block, en regardant Éléments de niveau bloc dans display: inline-block pourrait aider.

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

Vous pouvez essayer scroll ou auto.

1
Joop Eggen

Le style d'affichage inline-block Semble faire ce que vous voulez. Notez que la balise <nobr> Est déconseillée et ne doit pas être utilisée. Les espaces blancs insécables sont réalisables en CSS. Voici comment je modifierais vos règles de style d'exemple:

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

Modifiez votre feuille de style, supprimez les balises <nobr> De votre source et essayez-la. Notez que display: inline-block Ne fonctionne pas dans tous les navigateurs, bien qu'il ait tendance à être problématique uniquement dans les navigateurs plus anciens (les versions plus récentes devraient le prendre en charge dans une certaine mesure). Mon opinion personnelle est d'ignorer le codage des navigateurs défectueux. Si votre code est conforme aux normes, il devrait fonctionner dans tous les principaux navigateurs modernes. Quiconque utilise encore IE6 (ou une version antérieure) mérite la peine. :-)

1
Jonah Bishop

Essaye ça,

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

C'est parce que vous définissez le width:100% qui par définition ne couvre que la largeur de l'écran. Vous souhaitez définir le min-width:100% ce qui le définit à la largeur de l'écran ... avec la possibilité de croître au-delà.

Assurez-vous également de définir min-width:100% pour body et html.

0
Tomas

La largeur est limitée par la taille du corps. Si vous agrandissez la largeur du corps, vous verrez qu'il reste sur une ligne avec la couleur d'arrière-plan.

Pour maintenir la largeur minimale: largeur min: 100%

0
Rob

ou essayez ceci,

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