css - porcentaje - hacer que un div ocupe todo el ancho

¿Cómo hacer que el ancho de CSS llene el padre? (4)

Estoy seguro de que se ha preguntado este problema antes, 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 que foo tenga un ancho de 600px ( width: 600px; ) y que barra tenga 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 al 100% para que se 592px 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 matemáticos para todas estas instancias manualmente.

¿Es esto posible en CSS puro?

Algo más divertido con esto:

¿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 )? (¿Esto cambia el problema o es el problema idéntico?)

Hasta el momento, la table#bar , la table#bar input#bar ha sido discutida. No he visto una buena solución para textarea # bar. Creo que un área de texto sin borde / margen / relleno con una envoltura div podría funcionar con el estilo div para trabajar como bordes para el área de textarea .

Luego de la investigación, se descubre lo siguiente:

Para una display:block; width: auto; configuración de div#bar display:block; width: auto; display:block; width: auto; causa el equivalente de outerWidth:100%;

Para una table#bar , debe envolverlo en un div con las reglas que se detallan a continuación. Entonces tu 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 toma el div principal al 100% y #barWrap se usa para agregar bordes / margen / relleno a la tabla #bar . Tenga en cuenta que deberá establecer el fondo de todo el conjunto en #barWrap y que el fondo de la #barWrap #bar sea transparente o el mismo que #barWrap .

Para la textarea#bar input#bar , debe hacer lo mismo que la table#bar , el inconveniente es que al eliminar los bordes se detiene la reproducción de widget nativa de la entrada / área de texto y los #barWrap de #barWrap se verán un poco diferente a todo lo demás, por lo que probablemente tendrá que diseñar todas sus entradas de esta manera.

Usa los estilos

left: 0px;

o y

right: 0px;

o y

top: 0px;

o y

bottom: 0px;

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

casi allí, simplemente cambie outerWidth: 100%; al width: auto; (outerWidth no es una propiedad de CSS)

alternativamente, aplique los siguientes estilos a la barra:

width: auto; display: block;

EDITAR :

Bueno, esos tres elementos diferentes tienen diferentes reglas de redndering jaja.

Entonces para:

table#bar , necesita establecer el ancho al 100%; de lo contrario, solo será tan ancho como determine que debe ser. Sin embargo, si el ancho total de las filas de la tabla es mayor que el ancho de la bar , se ampliará al ancho necesario. Si recuerdo, puede 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 toma 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 puede asignarle ancho. Sin embargo, similar al atributo cols textarea , tiene un atributo de size en el elemento que puede determinar el ancho. Dicho esto, siempre puedes especificar un ancho usando display: block; en tu css por eso. Entonces seguirá las mismas reglas de representación que el div.

td#foo se representará como una table-cell que tiene algo de locura. La conclusión aquí es que para sus propósitos va a actuar como 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 (el valor predeterminado), será el 100% del ancho interno del elemento que lo contiene. así que en esencia:

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

te dará exactamente lo que quieres