Div largeur de 100% moins d'une quantité fixe de pixels

Vous pouvez utiliser les éléments imbriqués et de rembourrage pour obtenir un de gauche et de droite sur la barre d'outils. La largeur par défaut d'un div élément est auto, ce qui signifie qu'il utilise la largeur disponible. Vous pouvez ensuite ajouter le remplissage de l'élément et il garde toujours à l'intérieur de la largeur disponible.

Voici un exemple que vous pouvez utiliser pour mettre des images de gauche et de droite, des coins arrondis, et un centre de l'image qui se répète entre eux.

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

Tout Guffa réponse œuvres dans de nombreuses situations, dans certains cas, vous pouvez ne pas vouloir la gauche et/ou droit des morceaux de rembourrage pour être le parent d'un centre de div. Dans ces cas, vous pouvez utiliser un bloc de mise en forme de contexte sur le centre et faire flotter le rembourrage divs à gauche et à droite. Voici le code

Le code 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 l'impression que cet élément de la hiérarchie est plus naturel quand par rapport à imbriquée divs imbriqués, et représente mieux ce qui est sur la page. De ce fait, les frontières, le remplissage et la marge peut être appliqué normalement à tous les éléments (c'est à dire: cette "naturalité" va au-delà de style et a des ramifications).

Notez que cela ne fonctionne que sur les divs et les autres éléments qui partage son remplissage 100% de la largeur par défaut de la propriété. Les entrées, les tables, et, éventuellement, d'autres auront besoin de vous envelopper dans un div conteneur et ajouter un peu de css pour restaurer cette qualité. Si vous avez la malchance d'être dans cette situation, contactez-moi et je vais creuser le css.

jsfiddle ici: jsfiddle.net/RgdeQ

Profitez-en!

La façon habituelle de faire, c'est comme indiqué par Guffa, les éléments imbriqués. C'est un peu triste d'avoir à rajouter de la majoration pour obtenir les crochets dont vous avez besoin pour cela, mais dans la pratique, un wrapper div là ou il n'y aura pas de mal à personne.

Si vous devez le faire sans éléments supplémentaires (par exemple. lorsque vous n'avez pas le contrôle de la page de balisage), vous pouvez utiliser box-sizing, ce qui est assez décent, mais pas complète ou simple prise en charge du navigateur. Probablement plus amusant que d'avoir à compter sur des scripts, si.

Nous pouvons atteindre cet objectif à l'aide de flex-boîte très facilement.

Si nous avons trois éléments comme les en-têtes, MiddleContainer et Pied de page. Et nous voulons donner une certaine hauteur fixe à en-Tête et Pied de page. alors on peut l'écrire comme ceci:

Pour Réagir/RN(par défaut sont "display" flex et "flexDirection" comme colonne), en web css, nous allons spécifier le corps de récipient ou d'un conteneur contenant ces comme d'affichage: 'flex', flex-direction: 'colonne', comme ci-dessous:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, //this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

J'ai eu un problème similaire où je voulais une bannière en haut de l'écran qui a une image sur la gauche et une répétition d'une image sur la droite vers le bord de l'écran. J'ai fini par le résoudre comme suit:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

La clé était la bonne balise. Je suis fondamentalement en précisant que je veux recommencer à partir de l'131px de la gauche à 0px du droit.