CSS 100% de largeur, mais éviter de barre de défilement

C'est probablement une variation de quelque chose qui a été résolu des dizaines de fois mais CSS me fait vraiment sentir comme un imbécile.

Je suis en train de construire un widget qui peut être positionné et dimensionné dans une variété de façons. C'est une jolie mise en page simple - hauteur fixe-tête, fixe-hauteur du pied de page, et un corps qui occupe le reste de l'espace. L'ensemble de la largeur et de la hauteur varie. La teneur de l'organisme en a besoin pour faire défiler. J'ai le conteneur global, en-tête, pied de page, et le corps de dimensionnement ok.

Mais ce que je veux, c'est pour le corps pour faire défiler lorsqu'il en a besoin, SANS se rétracter du contenu vers la gauche lorsque la barre de défilement apparaît. C'est, je veux le corps à être aussi large qu'il le peut MOINS la barre de défilement qui serait là si elle avait besoin de faire défiler, de sorte que quand il N'est plus nécessaire de faire défiler il n'y a pas de psy. En effet, ce que je veux c':

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

Je veux que le contenu qui pourrait faire défiler jusqu'à être aussi large qu'il le peut MOINS le potentiel de la barre de défilement largeur (|*| région).

Ce que j'ai maintenant est quelque chose comme ceci:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

J'ai essayé les marges, rembourrage, même %-largeur d'à l'intérieur de la plupart des div et de tous les "faire la maj' chose. J'ai aussi besoin de ce travailler dans FF3, IE7/8 et (fantasme?) IE6.

InformationsquelleAutor n8wrl | 2010-08-22
  1. 14

    Utilisation overflow: scroll au lieu de overflow: auto - qui forcent une barre de défilement pour apparaître toujours.

    • Bien que certainement empêche le passage/rétrécir mais j'espérais vraiment ne pas avoir à le faire.
    • C'est vraiment le meilleur que vous pouvez faire avec CSS seul.
    • Merci de prendre le temps
    • J'ai overflow: scroll; et width: 100%; et l'élément est encore trop large (il y a une barre de défilement horizontale).
    InformationsquelleAutor casablanca
  2. 3

    Ajouter un autre wrapper à l'intérieur de l'élément qui aura le overflow:auto style et fixé à environ 18px plus étroit. La barre de défilement doit apparaître dans cette 18px écart.

    • +1, mais depuis l'OP ne connais pas la largeur du conteneur, il aurait besoin de JavaScript pour le mettre en œuvre.
    • Avec FF & IE9 (venant d'un navigateur près de chez vous!) faire quelque chose comme (FF) width: -moz-calc(100% - 16px);
    • Sauf lorsque la barre de défilement est 27x (ou autre). Hoorah.
    • j'ai utilisé 16px, je préfère une barre de défilement clip un tout petit peu que de laisser un écart infime. A également fait à l'aide d'un wrapper et le réglage de la marge de droite 16px permettant à l'élément d'origine pour rester à 100% sans tomfoolery.
    InformationsquelleAutor Stuart Burrows
  3. 1

    Pourquoi ne pas afficher toujours les barres de défilement, même quand il n'est pas nécessaire de faire défiler?

    Vous pouvez atteindre cet objectif par la mise en overflow:scroll; pour le conteneur.

    InformationsquelleAutor Arseni Mourzenko
  4. 1

    J'ai eu un problème similaire que j'ai utilisé ci-dessous la solution, je ne suis pas sûr si cela peut être une solution à ce que vous voulez faire, mais il pourrait l'être.

    J'ai eu un div qui redimensionnée automatiquement le contenu, puis le parchemin a été ajouté, la diminution de l'intérieur, de sorte que la table dans l'enveloppa de texte, au lieu de faire le conteneur d'autant plus large. L'effet indésirable est considéré dans le dessous de Vieux exemple, si le textarea est redimensionnée à la baisse et le défilement s'affiche.

    Mon laid solution était d'ajouter une div à l'intérieur de l'overflow-y:auto-div, qui avait display:inline-block, et pour ajouter encore un autre petit inline-block div après elle, qui était de 19 pixels de large (réservé pour la barre de défilement) et un pixel de haut. Que peu div apparaît à côté du véritable div lorsque le navigateur redimensionné la div du contenu, et lorsque la barre de défilement apparaissent, la petite div est poussé vers le bas sous le réel de la div, et le réel div garde sa avec. Il va provoquer un pixel en bas "de la marge", mais j'espère ne pas un problème. Lorsque aucune barre de défilement ppears, il y a 19 pixel de l'espace inutilisé à côté de la vraie div, comme décrit dans la Question.

    (Ultrapériphériques div est juste là pour reproduire mon setup/problème).

    Vieux:

    <div style="display:inline-block">
  <div style="max-height:120px; overflow-y:auto; border:1px solid gray">
    <table border=1><tr>
       <td>I do not</td><td>want this to</td>
       <td>add breaks in the text.</td>
    </tr></table>
    <textarea rows=3 cols=15>Resize me down</textarea>
  </div>
</div>
<br>

    Nouveau:

    <div style="display:inline-block">
  <div style="max-height:150px;overflow-y:auto; border:1px solid gray">
    <div style="display:inline-block">
      <table border=1><tr>
          <td>I do not</td><td>want this to</td>
          <td>add breaks in the text.</td>
      </tr></table>
      <textarea rows=3 cols=15>Resize me down</textarea>
    </div>
    <div style="display:inline-block; width:19px; height:1px"></div>
  </div>
</div>
<br>
    InformationsquelleAutor jek
  5. 0

    Le problème est qu'une fois que vous passez la souris sur le conteneur et la barre de défilement s'affiche, puis le contenu de la largeur se rétrécit. Donc, même si vous utilisez un conteneur imbriqué, dont la largeur est égale à la contenant moins de son barre de défilement, la largeur du conteneur imbriqué permettra également de réduire.

    Une solution consiste à augmenter la taille du contenu par la largeur de la barre de défilement sur le vol stationnaire. Voici une solution qui n'a pas besoin d'utiliser toutes les emballages extérieurs (categoryCont est le défilement du conteneur et chaque menuBlock est l'un des éléments à faire défiler):

    <div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
    <div class="menuBlock" style="width:200px">a</div>
    <div class="menuBlock" style="width:200px">b</div>
    <div class="menuBlock" style="width:200px">c</div>
    ...
</div>

<style type="text/css">
    #categoryCont:hover{
        overflow-y: auto;
    }
    #categoryCont:hover .menuBlock{
    /* Increase size of menu block when scrollbar appears */
        width: 218px;    /* Adjust for width of scroll bar. */
    }
</style>

    Un problème avec le ci-dessus est que la largeur de la barre de défilement est un peu différente dans les différents navigateurs. L'un des points suivants devraient vous aider:

    • En utilisant px

    Mettre le contenu en valeur absolue, avec un retrait à gauche comme une valeur absolue

    <div class="menuBlock" style="width:200px">
    a
</div>

    changements à

    <div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>
    • En utilisant %

    Vous avez besoin de CSS et de jQuery(Première étape est la même)

    <div class="menuBlock" style="width:200px">
    a
</div>

    changements à

    <div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use 'left' */
    }
</style>

<script>
    //Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>
    InformationsquelleAutor wallop