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, 592px
me 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 800px
y 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
#bar
es una mesa? - ¿Y si
#bar
es un área de texto? ¿Y si
#bar
es una entrada?¿Qué pasa si
#foo
es una celda de tabla (td
)? (¿Esto cambia el problema o el problema es idéntico?)
Hasta ahora 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 div
ajuste podría funcionar con el div
estilo para que funcione como bordes para textarea
.