Largeur de la division 100% moins la quantité fixe de pixels
https://stackoverflow.com/questions/651317
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je obtenir la structure suivante sans utiliser de tableaux ou JavaScript? Les bordures blanches représentent les bords des div et ne sont pas pertinentes pour la question.
La taille de la zone centrale va varier, mais elle aura des valeurs de pixels exactes et la structure entière devra être redimensionnée en fonction de ces valeurs. Pour le simplifier, il faudrait un moyen de définir "100% - n px". largeur aux div 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 suffiraient.
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 le système de fenêtrage basé sur jQuery, mais j'aimerais garder la présentation en dehors du script et ne contrôler que la taille d'un élément (l'élément central).
La solution
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 élément de remplissage à l’élément, qui reste dans la largeur disponible.
Voici un exemple que vous pouvez utiliser pour placer des images selon des coins arrondis à gauche et à droite, ainsi qu'une image centrale qui se répète entre elles.
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;
}
Autres conseils
Nouvelle méthode que je viens de découvrir: css calc () :
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Source: css width 100% moins 100px
Bien que la réponse de Guffa fonctionne dans de nombreuses situations, dans certains cas, vous ne voudrez peut-être pas que les éléments de remplissage gauche et / ou droit soient le parent du centre div. 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 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 le sentiment que cette hiérarchie d’éléments est plus naturelle que les divs imbriquées imbriquées et représente mieux le contenu de la page. Pour cette raison, 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 qui partagent sa 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 déterrerai le css.
jsfiddle ici: jsfiddle.net/RgdeQ
Profitez!
Vous pouvez utiliser la Flexbox mise en page. Vous devez définir flex: 1 sur l'élément qui doit avoir une largeur ou une hauteur dynamique pour flex -direction: ligne et colonne , 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*/
}
Résultat:
.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*/
}
Résultat:
.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>
La manière habituelle de le faire est décrite par Guffa, des éléments imbriqués. Il est un peu triste de devoir ajouter des balises supplémentaires pour obtenir les crochets dont vous avez besoin, 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 prend en charge un navigateur plutôt convenable mais pas complet ou simple. Plus amusant sans doute que de devoir utiliser des scripts.
Peut-être que je suis idiot, mais n'est-ce 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 en chrome est encore plus simple, mais l'homme est un hack!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
Cela seul devrait remplir le reste de la ligne horizontalement, comme le font les cellules de tableau. 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.
Nous pouvons y parvenir très facilement en utilisant flex-box.
Si nous avons trois éléments tels que 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 de corps ou le conteneur contenant ces éléments en tant que display: '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,
}
Que se passe-t-il si votre division d'emballage est de 100% et que vous utilisez un remplissage pour une quantité de pixels? 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.
J'avais 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.
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 .
