css largeur de remplir parent

Question

Je suis sûr que ce problème a déjà été posées mais je n'arrive pas à trouver la réponse.

J'ai le balisage suivant:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

Mon souhait est de faire de foo = largeur de 600px (width: 600px;) et pour faire de la barre sont les suivantes comportements:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

En d'autres mots, au lieu de définir la largeur de la barre de 592px" je voudrais définir la largeur de la barre à 100%, de sorte qu'il est calculé pour 592px. L'importance ici, c'est que je peux changer de foo de la largeur de 800px et le bar vous calculer une fois rendu au lieu de m'avoir à faire le calcul pour toutes ces instances manuellement.

Est-ce possible dans le plus pur css?

Plus de plaisir avec elle:

• Que faire si #de la barre est un tableau?
• Que faire si #de la barre est un textarea?

• Que faire si #de la barre est un input?

• Que faire si #foo est un td? (est-ce le changement le problème ou le problème est identique?)

---

Jusqu'à présent, le tableau n ° bar, entrée#bar qui a été discuté. Je n'ai pas vu une bonne solution pour les textarea#bar. Je Pense qu'un textarea sans frontière/marge/pading avec un div envelopper pourrait collaborer avec les div style de travail que les frontières du textarea.

Answer 1

EDIT:

Bien que ces trois éléments différents ont différentes redndering règles haha.

Ainsi pour:

table#bar vous devez définir la largeur à 100% sinon il ne sera plus large que détermine qu'il doit être. Toutefois, si les lignes de la table largeur totale est supérieure à la largeur de l' bar développer la à son besoin largeur. SI je me souviens vous pouvez lutter contre ce problème en définissant display: block !important; , bien que son été un certain temps depuis que j'ai eu à résoudre ce problème. (je suis sûr que quelqu'un va me corriger si je suis mauvais).

textarea#bar je crois est un élément de niveau bloc, donc il suivra les règles de la même que la div. Le seul inconvénient ici est que l' textarea prendre un des attributs de l' cols et rows qui sont mesurées dans les colonnes de caractères. Si cela est spécifié sur l'élément qu'il remplace la largeur spécifiée par le css.

input#bar est un élément inline, donc par défaut, vous ne pouvez pas affecter la largeur. Cependant, le similaire textareas' cols d'attribut, il a un size l'attribut de l'élément qui permet de déterminer la largeur. Cela dit, vous pouvez toujours spécifier une largeur en utilisant display: block; dans votre css pour elle. Ensuite, il suivra les mêmes règles de rendu que la div.

td#foo sera rendu en tant que table-cell qui a un peu de folie pour elle. Ligne de fond ici est que pour vous sa va agir comme div#foo aussi loin que de limiter la largeur de son contenu. La seule difficulté va être de potentiel unwrappable texte dans la colonne de quelque part qui serait ignorer la largeur de votre cadre. Aussi toutes les cellules dans la colonne allons obtenir la largeur de la cellule la plus large.

---

C'est le comportement par défaut de l'élément de niveau bloc - ie. si la largeur est - auto (valeur par défaut), puis il sera de 100% de la largeur intérieure de l'élément conteneur. donc, en substance:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

vous donnera exactement ce que vous voulez.

Answer 2

près de là, il suffit de changer outerWidth: 100%; de width: auto; (outerWidth n'est pas une propriété CSS)

on peut aussi appliquer les styles suivants de la barre:

width: auto;
display: block;

Answer 3

Donc après recherche ce qui suit est découvert:

Pour un div#bar paramètre display:block; width: auto; provoque l'équivalent d' outerWidth:100%;

Pour un table#bar vous avez besoin pour l'envelopper dans un div avec les règles énoncées ci-dessous. Si votre structure devient:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

De cette façon, le tableau prend la div parent à 100% et, #barWrap est utilisé pour ajouter des bordures/margin/padding à l' #bar table. Notez que vous aurez besoin pour définir l'arrière-plan de toute la chose en #barWrap et ont #bars'arrière-plan transparent ou même en tant que #barWrap.

Pour textarea#bar et input#bar , vous devez faire la même chose qu' table#bar, l'inconvénient c'est qu'en supprimant les frontières de vous arrêter natif widget rendu de l'input/textarea et l' #barWraps'frontières sera un peu différent de tout le reste, alors vous devrez probablement le style de toutes vos entrées de cette façon.