Div largeur 100% moins le nombre fixe de pixels

comment réaliser la structure suivante sans utiliser de tableaux ou JavaScript? Les bordures blanches représentent les bords des divs et ne sont pas pertinentes à la question.

Structure 1

la taille de la zone du milieu va varier, mais elle aura des valeurs de pixels exactes et toute la structure devrait se dimensionner en fonction de ces valeurs. Pour simplifier, j'ai besoin d'un moyen de mettre "100% - n px" largeur vers le haut-milieu et le bas-moyen divs.

j'apprécierais une solution de cross-browser propre, mais au cas où ce ne serait pas possible, les hacks CSS feront l'affaire.

voici un bonus. Une autre structure avec laquelle je me suis battu et qui utilise des tables ou JavaScript. Il est légèrement différent, mais introduit de nouveaux problèmes. Je l'ai utilisé principalement dans un 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 (le milieu).

Structure 2

279
demandé sur Removed_account 2009-03-16 20:14:24
la source

10 ответов

vous pouvez utiliser des éléments emboîtés et du rembourrage pour obtenir un bord gauche et droit 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 alors ajouter du rembourrage à l'élément et il reste dans la largeur disponible.

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

the HTML:

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

The 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;
}
73
répondu Guffa 2015-03-31 01:25:28
la source

Nouvelle façon je viens de tombé sur: css calc() :

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

Source: largeur css 100% moins 100px

660
répondu rom_j 2016-10-20 14:51:46
la source

bien que la réponse de Guffa fonctionne dans de nombreuses situations, dans certains cas, vous pouvez ne pas vouloir les morceaux de gauche et/ou de droite de rembourrage pour être le parent de la div centrale. Dans ces cas, vous pouvez utiliser un contexte de formatage de bloc au centre et faire flotter les divs de remplissage gauche et droite. Voici le code

the HTML:

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

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

je pense que cet élément de hiérarchie est plus naturel par rapport à imbriqué divs imbriqué, et mieux représente ce qui est sur la page. Pour cette raison, les bordures, le rembourrage 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 sa propriété "remplir 100% de la largeur par défaut". 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.

ici jsfiddle: jsfiddle.net/RgdeQ

Profitez-en!

6
répondu Unislash 2012-08-26 14:08:01
la source

la façon habituelle de le faire est tel que souligné par Guffa, éléments imbriqués. C'est un peu triste d'avoir à ajouter une marge supplémentaire pour obtenir les crochets dont vous avez besoin pour cela, mais dans la pratique une div wrapper ici ou il ne va blesser 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 box-sizing , qui a assez décent mais pas complet ou simple soutien du navigateur. Probablement plus amusant que d'avoir de s'appuyer sur des scripts.

3
répondu bobince 2017-05-23 15:03:09
la source

peut-être que je suis stupide, mais est-ce que la table n'est pas la solution évidente ici?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

une autre façon que j'ai compris dans chrome est encore plus simple, mais l'homme est-il un hack!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

ce seul élément devrait remplir le reste de la ligne horizontalement, comme le font les cellules du tableau. Cependant, vous obtenez quelques problèmes étranges avec elle allant au-dessus de 100% de son parent, le réglage de la largeur à une valeur de pourcentage le fixe cependant.

3
répondu Jack Franzen 2015-09-24 12:27:29
la source

vous pouvez utiliser la disposition Flexbox ". Vous devez mettre flex: 1 sur l'élément qui doit avoir la largeur dynamique ou la hauteur pour flex-direction: row and column respectivement.

Largeur dynamique:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

sortie:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

hauteur dynamique:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

sortie:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>
3
répondu Manoj Kumar 2015-12-10 16:29:02
la source

que se passe-t-il si votre div d'emballage était 100% et que vous avez utilisé le rembourrage pour un montant de pixel, puis si le # de rembourrage doit être dynamique, vous pouvez facilement utiliser jQuery pour modifier votre montant de rembourrage lorsque vos événements de feu.

2
répondu dfasdljkhfaskldjhfasklhf 2009-03-16 20:16:37
la source

nous pouvons y parvenir en utilisant flex-box très facilement.

si nous avons trois éléments comme Header, MiddleContainer et Footer. Et nous voulons donner une hauteur fixe à L'en-tête et au pied de page. alors nous pouvons écrire comme ceci:

pour React/RN (les valeurs par défaut sont 'display' en tant que colonne flex et 'flexDirection' en tant que colonne), dans web css nous devrons spécifier le corps du conteneur ou du conteneur contenant ceux-ci en tant que display: 'flex', flex-direction: 'column' 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,
    }
1
répondu jayiitb 2017-09-19 07:29:02
la source

dans certains contextes, vous pouvez utiliser les paramètres de marge pour spécifier efficacement"largeur 100% moins n pixels". Voir la réponse acceptée à cette question .

0
répondu chaos 2017-05-23 15:03:09
la source

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 ça:

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 précise que je veux qu'il se répète de 131px à partir de la gauche à 0px à partir de la droite.

0
répondu Mike Carey 2011-02-08 07:25:19
la source

Autres questions sur html css height width