web-dev-qa-db-fra.com

Remplacer le style de largeur en ligne <div> pour étirer l'élément au contenu?

Travailler à redéfinir l'intranet d'un client. Je ne peux pas modifier le code HTML existant, ne fournissez qu'une feuille de style de remplacement.

Le code HTML contient un wrapper de contenu corporel - chaque fois que la fenêtre est redimensionnée, il obtient une largeur et une hauteur explicites définies en ligne avec la largeur et la hauteur de la fenêtre:

<div id="s4-workspace" style="height: 660px; width: 1331px;">

Maintenant, certaines pages ont un grand tableau dans ce wrapper de contenu (au moins 1600 px de large) et lorsque la fenêtre est plus petite, le tableau se détache du conteneur en laissant derrière tout l'arrière-plan et le remplissage. Tous les autres éléments obéissent à la largeur du wrapper, créant tout un tas d'espace négatif lors du défilement vers la droite:

enter image description here

Existe-t-il un moyen de remplacer la largeur en ligne et d'autoriser le conteneur div #s4-workspace s'étirer à son contenu? Ma meilleure supposition était de définir width: auto !important;, mais chrome et firefox donnent toujours la priorité au style en ligne. Toute aide est appréciée.

htmlcsswidthcss-tables
8
CodeMoose

Dans votre instance spécifique (remplacement de la largeur/hauteur pour éviter le débordement du contenu), la modification du type d'affichage fera ce dont vous avez besoin:

http://cssdeck.com/labs/kfpnpruw

<div class="foo" style="width: 400px; height: 300px;">
  Foo
  <img src="http://placekitten.com/600/300" /><!-- 600x300 image -->
</div>

.foo {
  background: yellow;
  display: table-cell;
  padding: .5em;
}

Les éléments définis sur table-cell traiteront les propriétés width et height comme une valeur suggérée , plutôt qu'une valeur absolue.

13
cimmanon

Vous pouvez remplacer le style en ligne d'élément comme ceci:

div[style] {
   background: yellow !important;
    height: auto!important
}

Découvrez ceci violon

1
raam86