¿Cómo hacer que el ancho de CSS llene el elemento primario?

Question

Estoy seguro de que se ha preguntado antes este problema pero parece que no puedo encontrar la respuesta.

tengo el siguiente marcado:

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

Mi deseo es hacer foo para tener ancho de 600px (width: 600px;) y hacer de barras tienen los siguientes comportamientos:

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

En otras palabras en lugar de establecer el ancho de la barra a 592px Me gustaría establecer el ancho exterior de la barra a 100% para que se compute a 592px. La importancia aquí es que puedo cambiar el ancho de foo a 800px y la barra calculará cuando se represente en lugar de tener que hacer los cálculos para todas estas instancias manualmente.

¿Es esto posible en CSS puro?

Algunos más diversión con ella:

• ¿Qué pasa si #bar es una tabla?
• ¿Qué pasa si #bar es un área de texto?

• ¿Qué pasa si #bar es una entrada?

• ¿Qué pasa si #foo es una celda de tabla (td)? (¿Cambia el problema o el problema es idéntica?)

---

Hasta ahora, el table#bar, input#bar se ha discutido. No he visto una buena solución para textarea # bar. Creo que un área de texto sin borde/margen/relleno con un ajuste div podría funcionar con el div diseñado para trabajar como bordes para el textarea.

Answer 1

EDITAR:

Bueno esas tres elementos diferentes tienen diferentes reglas de redndering jaja.

Así para:

table#bar debe configurar el ancho a 100% de lo contrario no será más que ser tan amplio como lo determina lo que debe ser. Sin embargo, si el ancho total de las filas de la tabla es mayor que el ancho de bar, se ampliará al ancho necesario. Si recuerdo, puedes contrarrestar esto configurando display: block !important; aunque ha pasado un tiempo desde que tuve que arreglar eso. (estoy seguro de que alguien me va a corregir si estoy equivocado).

textarea#bar i beleive es un elemento de nivel de bloque por lo que seguirá las reglas del mismo modo que el div.La única advertencia aquí es que textarea toman los atributos de cols y rows que se miden en columnas de caracteres. Si esto se especifica en el elemento, anulará el ancho especificado por el css.

input#bar es un elemento en línea, por lo que de forma predeterminada no se puede asignar ancho. Sin embargo, similar al atributo textarea de cols, tiene un atributo size en el elemento que puede determinar el ancho. Dicho esto, siempre puede especificar un ancho usando display: block; en su CSS. Entonces seguirá las mismas reglas de representación que el div.

td#foo se representará como table-cell que tiene alguna locura. En resumen, para sus propósitos va a actuar igual que div#foo en cuanto a restringir el ancho de su contenido. El único problema aquí será un posible texto no envolvente en la columna en algún lugar que lo haría ignorar la configuración de ancho. Además, todas las celdas de la columna obtendrán el ancho de la celda más ancha.

---

Ese es el comportamiento predeterminado del elemento de nivel de bloque, es decir. si el ancho es auto (valor predeterminado), será el 100% del ancho interno del elemento contenedor. entonces en esencia:

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

le dará exactamente lo que quiere.

Answer 2

casi allí, solo cambia outerWidth: 100%; a width: auto; (outerWidth no es una propiedad CSS)

alternativamente, aplicar los siguientes estilos de barra:

width: auto; 
display: block; 

Answer 3

Así que después de la investigación se descubrió lo siguiente:

Para una configuración de div#bardisplay:block; width: auto; hace que el equivalente de outerWidth:100%;

Para una table#bar que necesita para envolverlo en un div con las normas indicadas a continuación. Por lo que su estructura se convierte en:

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

De esta manera la tabla ocupa el div matriz al 100%, y #barWrap se utiliza para añadir bordes/margen/relleno para la mesa #bar. Tenga en cuenta que deberá configurar el fondo de todo el asunto en #barWrap y tener el fondo #bar transparente o igual que #barWrap.

Para textarea#bar y input#bar que tiene que hacer lo mismo que table#bar, la desventaja es que mediante la eliminación de las fronteras de dejar de prestación widgets nativos de la entrada/área de texto y las fronteras 's la #barWrap se verá un poco diferente a todo lo de lo contrario, probablemente tendrá que aplicarle un estilo a todas sus entradas de esta manera.

Answer 4

Usar los estilos

left: 0px; 

y/o

right: 0px; 

y/o

top: 0px; 

y/o

bottom: 0px; 

Creo que para la mayoría de los casos eso hará el trabajo