Largeur du Div 100% moins un nombre fixe de pixels

Question

Comment puis-je obtenir la structure suivante sans utiliser de tableaux ni de JavaScript ? Les bordures blanches représentent les bords des divs et ne sont pas pertinentes pour la question.

La taille de la zone du milieu va varier, mais elle aura des valeurs de pixels exactes et la structure entière devra être mise à l'échelle en fonction de ces valeurs. Pour simplifier, j'ai besoin d'un moyen de définir une largeur de "100% - n px" pour les divs haut-milieu et bas-milieu.

J'apprécierais une solution cross-browser propre, mais si ce n'est pas possible, des bidouillages CSS feront l'affaire.

Voici un bonus. Une autre structure avec laquelle j'ai eu du mal et qui finit par utiliser des tableaux ou du JavaScript. C'est légèrement différent, mais cela introduit de nouveaux problèmes. Je l'ai principalement utilisé dans le système de fenêtrage basé sur jQuery, mais j'aimerais garder la mise en page hors du script et ne contrôler que la taille d'un élément (celui du milieu).

Answer 1

Nouvelle méthode sur laquelle je viens de tomber : css calc()

.calculated-width {
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
}​

Source : css largeur 100% moins 100px

Je viens de l'essayer, ça marche bien.

Answer 2

Vous pouvez utiliser des éléments imbriqués et un rembourrage pour obtenir un bord gauche et un bord droit sur la barre d'outils. La largeur par défaut d'une div L'élément est auto ce qui signifie qu'il utilise la largeur disponible. Vous pouvez ensuite ajouter du remplissage à l'élément et il reste toujours dans la largeur disponible.

Voici un exemple que vous pouvez utiliser pour mettre des images en coins arrondis à gauche et à droite, et une image centrale qui se répète entre eux.

Le HTML :

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

Le CSS :

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Answer 3

Bien que la réponse de Guffa fonctionne dans de nombreuses situations, dans certains cas, il se peut que vous ne souhaitiez pas que les éléments de remplissage de gauche et/ou de droite soient le parent de la division centrale. Dans ces cas, vous pouvez utiliser un contexte de formatage de bloc sur le centre et faire flotter les divs de remplissage à gauche et à droite. Voici le code

Le HTML :

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

Le CSS :

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

J'ai le sentiment que cette hiérarchie d'éléments est plus naturelle par rapport aux divs imbriqués et qu'elle représente mieux ce qui se trouve sur la page. De ce fait, les bordures, le padding et la marge peuvent être appliqués normalement à tous les éléments (c'est-à-dire que cette "naturalité" va au-delà du style et a des ramifications).

Notez que cela ne fonctionne que sur les divs et autres éléments qui partagent la propriété "remplir 100% de la largeur par défaut". Les entrées, les tableaux et peut-être d'autres éléments nécessiteront que vous les enveloppiez dans un div conteneur et que vous ajoutiez un peu plus de css pour rétablir cette qualité. Si vous avez la malchance de vous trouver dans cette situation, contactez-moi et je trouverai le css.

jsfiddle ici : jsfiddle.net/RgdeQ

Profitez-en !

Answer 4

La façon habituelle de procéder est celle décrite par Guffa, avec des éléments imbriqués. C'est un peu triste d'avoir à ajouter des balises supplémentaires pour obtenir les crochets dont vous avez besoin pour cela, mais en pratique, un div wrapper ici ou là ne fera de mal à personne.

Si vous devez le faire sans éléments supplémentaires (par exemple lorsque vous n'avez pas le contrôle du balisage de la page), vous pouvez utiliser Taille de la boîte qui a un support de navigateur assez décent mais pas complet ou simple. C'est sans doute plus amusant que de devoir compter sur des scripts.

Answer 5

Et si votre div d'habillage était de 100% et que vous utilisiez le padding pour une quantité de pixels, alors si le padding # doit être dynamique, vous pouvez facilement utiliser jQuery pour modifier votre quantité de padding lorsque vos événements se déclenchent.