0
votes

Comment puis-je régler la largeur d'une DIV imbriquée pour égaler la largeur d'un ancêtre div?

Mes pages sont structurées comme divs imbriqués. Ils ont un rembourrage et une marge afin que les divs intérieurs soient typiquement physiquement plus petits que les divs extérieurs. Cependant, dans certains cas, j'aimerais que l'une des divs internes (boîte rouge dans l'image ci-dessous) se développe larvoir pour correspondre aux bords gauche et droit de la div.

#div-a {
  position:relative;
}
#div-d {
  position:absolute;
  left:0;
  right:0;
}

css position

2 commentaires

Voulez-vous seulement DIV-D pour développer et faire correspondre la largeur des parents?

@Arun pourrait être tout (ou plus d'une) des divs internes.

4 Réponses :

1
votes

Cette approche pourrait-elle être une solution?

#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding 
values)}

1 commentaires

J'en ai considéré cela, mais la largeur du rembourrage DIV change de manière réactive, donc je ne saurai pas la largeur totale car la page est générée.

1
votes

#div-c {
    display: flex;
    align-items: center;
}

#div-d {
    width: calc(100% + PADDINGS + BORDERS);
}
PADDINGS: sum of each parents divs padding.BORDERS: sum of each parents borders.

1 commentaires

J'en ai considéré cela, mais le rembourrage change de manière réactive, je ne saurai pas la largeur totale lorsque la page est générée.

0
votes

Malheureusement, je n'ai pas pu trouver une solution de CSS uniquement pour mon problème particulier. Je devais recourir à JavaScript.

enveloppez la DIV qui doit être une largeur complète avec un autre div li> ol>
xxx pré>
1. Utilisez ce CSS LI> ol>
  xxx pré>
  1. Appliquez le JavaScript suivant (en utilisant JQuery) LI> OL>
    $('#div-d-wrapper').height($('#div-d').outerHeight());

0 commentaires

0
votes

div{
  padding:10px;
  border: 1px solid red;
}

#div-d{
  margin-left:-32px;
  margin-right:-32px;
}
i used hard code values to for the given div . My solution is to use Negative margins in css. When the div grows dynamically, you use javascript or jquery to find parent reach from child div and calculate the margins accordingly.fiddle demo: https://jsfiddle.net/bqrxtLvd/Source:
Negative margin css tricksDetailed negative margin

0 commentaires