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

88

Estoy seguro de que este problema se ha planteado 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 hacer que la 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 en, 592pxme gustaría establecer el ancho exterior de la barra en 100%para que se calcule 592px. La importancia aquí es que puedo cambiar el ancho de foo 800pxy la barra se calculará cuando se procese en lugar de tener que hacer los cálculos para todas estas instancias manualmente.

¿Es esto posible en CSS puro?

Un poco más divertido con él:

  • ¿Y si #bares una mesa?
  • ¿Y si #bares un área de texto?

  • ¿Y si #bares una entrada?

  • ¿Qué pasa si #fooes una celda de tabla ( td)? (¿Esto cambia el problema o el problema es idéntico?)

Hasta ahora table#bar, input#barse ha discutido. No he visto una buena solución para textarea # bar. Creo que un área de texto sin borde / margen / relleno con un divajuste podría funcionar con el divestilo para que funcione como bordes para textarea.

css Dmitriy Likhten
fuente

Respuestas:

39

EDITAR :

Esos tres elementos diferentes tienen reglas de representación diferentes.

Entonces para:

table#bardebe 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 bar, se expandirá al ancho necesario. Si recuerdo, puede contrarrestar esto estableciendo display: block !important;aunque ha pasado un tiempo desde que tuve que arreglar eso. (Estoy seguro de que alguien me corregirá si me equivoco).

textarea#barCreo que es un elemento de nivel de bloque, por lo que seguirá las mismas reglas que el div. La única advertencia aquí es que textareatoman atributos de colsy rowsque se miden en columnas de caracteres. Si esto se especifica en el elemento, anulará el ancho especificado por el css.

input#bares un elemento en línea, por lo que, por defecto, no puede asignarle ancho. Sin embargo, el similar a textarea's colsatributo, tiene un sizeatributo en el elemento que puede determinar la anchura. Dicho esto, siempre puede especificar un ancho usando display: block;su CSS para ello. Entonces seguirá las mismas reglas de renderizado que el div.

td#foose representará como un table-cellque tiene algo de locura. La conclusión aquí es que para sus propósitos, actuará igual div#fooque en la medida en que restrinja el ancho de su contenido. El único problema aquí será el posible texto no envolvente en la columna en algún lugar, lo que lo haría ignorar su 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 predeterminado), entonces 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;}

te dará exactamente lo que quieres.

prodigitalson
fuente
Hey gracias. También se divierte con las mesas que deciden sangrar de todos modos. ¿Supongo que las tablas tienen el mismo comportamiento que los divs?
Dmitriy Likhten
@Dimitry: No se tienen reglas especiales que las hacen más como inline-blockde blockelementos. Sin embargo, tenga en cuenta que dije más como no es lo mismo que :-) Lo que probablemente esté experimentando es que, a menos que se defina lo contrario, generalmente se expandirán para acomodar todas las columnas, lo que puede ser realmente molesto si algunos de los encabezados / celdas tienen texto largo que no se puede envolver.
prodigitalson
Gracias por ayudar :) Permítanme actualizar un poco la pregunta para brindar una descripción mucho más completa de los problemas y, con suerte, todas las soluciones se pueden enumerar en una sección.
Dmitriy Likhten
He estado experimentando con la barra div # foo table # y estableciendo el ancho: 100% en la barra table # expandirá la tabla, pero los bordes / márgenes de la tabla sangrarán a través de div # foo. Configurar la tabla para mostrar: bloque no es bueno ya que arruina otros aspectos de la representación de la tabla, como el manejo del ancho de la fila. textarea # bar no se expandirá cuando el ancho se establezca en automático o no.
Dmitriy Likhten
1
ya textarea#barque debería poder configurarlo display: blockcon poco efecto adverso. En cuanto a la tabla, sé que he utilizado algún tipo de solución / mitigación para eso en el pasado, pero no recuerdo cuál era en este momento. Sin embargo, diré que generalmente no establezco "márgenes" en una tabla, sino que lo envuelvo en un div con padding / margins ... esto podría ser #foo mismo u otro div usado jsut para aplicar este tipo de espaciado. También puede hacer para contrarrestar el problema del borde para aplicar los bordes solo a la primera / última celda de una fila / las celdas en la primera / última fila
prodigitalson
28

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

alternativamente, aplique los siguientes estilos a la barra:

width: auto;
display: block;
Serbal
fuente
4
Eso no funcionará si establece un margen de relleno barporque se agregará al 100% de manera efectiva, lo barque lo hace más ancho que su padre foo.
prodigitalson
sí, respondí eso demasiado rápido; P
Rowan
Espera un segundo. Entonces, si configuro la propiedad de ancho en cualquier cosa, ¿sangrará? width: auto no es la solución, sino no establecer el ancho en absoluto.
Dmitriy Likhten
2
sí es cierto. Cualquier elemento que tenga display:block;(también conocido como elemento de nivel de bloque) adoptará este comportamiento. un elemento DIV tiene width:auto;y está display:block;configurado por defecto.
Rowan
Publicación anterior, pero ¿no podría simplemente usar box-sizing: border-box para permitir que el relleno esté dentro del ancho del elemento?
CHBresser
16

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 funcionará

Tigsar
fuente
4

Entonces, después de la investigación, se descubre lo siguiente:

Para un div#barajuste display:block; width: auto;causa el equivalente deouterWidth:100%;

Para un table#bar, debe envolverlo en un div con las reglas que se indican 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 ocupa el div principal al 100% y #barWrapse usa para agregar bordes / márgenes / relleno a la #bartabla. Tenga en cuenta que deberá establecer el fondo de todo el asunto #barWrapy que #barel fondo sea transparente o igual que #barWrap.

Porque textarea#bary input#barnecesita hacer lo mismo que table#bar, el lado negativo es que al eliminar los bordes, detiene la representación nativa del widget del área de entrada / texto y los #barWrapbordes se verán un poco diferentes a todo lo demás, por lo que probablemente tendrá que hacerlo diseñe todas sus entradas de esta manera.

Dmitriy Likhten
fuente