web-dev-qa-db-fra.com

Largeur Div 100% moins nombre de pixels fixe

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

Structure 1

La taille de la zone centrale va varier, mais elle aura des valeurs de pixels exactes et toute la structure devrait être redimensionnée en fonction de ces valeurs. Pour le simplifier, il faudrait un moyen de définir la largeur "100% - n px" sur les divs haut-milieu et bas-milieu.

J'apprécierais une solution multi-navigateurs propre, mais au cas où ce ne serait pas possible, les hacks CSS conviendraient.

Voici un bonus. Une autre structure que j'ai eu du mal à utiliser et qui finit par utiliser des tables ou JavaScript. C'est un peu différent, mais introduit de nouveaux problèmes. Je l'utilise principalement dans un système de fenêtrage basé sur jQuery, mais j'aimerais garder la mise en page en dehors du script et ne contrôler que la taille d'un élément (l'élément central).

Structure 2

htmlcssheightwidth
298
Removed_account

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

Voici un exemple que vous pouvez utiliser pour placer des images selon des angles arrondis à gauche et à droite, ainsi qu'une image centrale qui se répète entre elles.

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;
}
75
Guffa

Nouvelle façon dont je viens de tomber: css calc() :

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

Source: largeur CSS 100% moins 100px

719
rom_j

Bien que la réponse de Guffa fonctionne dans de nombreuses situations, dans certains cas, vous ne souhaitez peut-être pas que les éléments de remplissage gauche et/ou droit soient le parent de la division centrale. Dans ces cas, vous pouvez utiliser un contexte de formatage de bloc au centre et faire flotter les div de remplissage vers la gauche et vers la 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;
}

Je pense que cette hiérarchie d'éléments est plus naturelle par rapport aux divs imbriquées imbriquées et représente mieux ce qu'il y a sur la page. De ce fait, les bordures, les marges intérieures et les marges peuvent s'appliquer 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 div et autres éléments partageant la propriété 'Remplir 100% de la largeur par défaut'. Les entrées, les tables et peut-être d'autres nécessiteront de les envelopper dans un conteneur div et d'ajouter un peu plus de CSS pour restaurer cette qualité. Si vous êtes assez malchanceux pour être dans cette situation, contactez-moi et je creuserai le css.

jsfiddle ici: jsfiddle.net/RgdeQ

Prendre plaisir!

6
Unislash

Vous pouvez utiliser Flexbox layout. Vous devez définir flex: 1 sur l'élément qui doit avoir une largeur ou une hauteur dynamique pour flex-direction: row and column .

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>_
4
Manoj Kumar

Peut-être que je suis idiot, mais la table n'est-elle 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 trouvée dans chrome est encore plus simple, mais c'est un bidouillage!

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

Cela seul devrait remplir le reste de la ligne horizontalement, comme le font les cellules. Cependant, vous rencontrez des problèmes étranges si elle dépasse 100% de son parent. Régler la largeur sur une valeur en pourcentage le résout cependant.

3
Jack Franzen

La manière habituelle de le faire est décrite par Guffa, éléments imbriqués. C'est un peu triste de devoir ajouter du balisage supplémentaire pour obtenir les crochets dont vous avez besoin pour cela, mais dans la pratique, une diviseuse wrapper ici ou elle 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 page), vous pouvez utiliser dimensionnement de la boîte , qui offre une prise en charge assez décente mais non complète ou simple du navigateur. Probablement plus amusant que de devoir compter sur des scripts.

3
bobince

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

Si nous avons trois éléments comme Header, MiddleContainer et Footer. Et nous voulons donner une hauteur fixe à Header et Footer. alors nous pouvons écrire comme ceci:

Pour React/RN (les valeurs par défaut sont 'display' en tant que flex et 'flexDirection' en tant que colonne), dans Web css, nous devrons spécifier le conteneur du corps ou le conteneur contenant ces éléments 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,
    }
2
jayiitb

et si votre div d'emballage était de 100% et que vous utilisiez le remplissage pour une quantité de pixels, alors si le remplissage doit être dynamique, vous pouvez facilement utiliser jQuery pour modifier le montant de remplissage lorsque vos événements sont déclenchés.

1
dfasdljkhfaskldjhfasklhf

J'ai eu un problème similaire: je voulais une bannière en haut de l'écran avec une image à gauche et une image répétée à droite du 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 étiquette. En gros, je précise que je veux qu'il répète de 131px de gauche à 0px de droite.

1
Mike Carey

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

0
chaos