Как сделать так, чтобы ширина CSS заполняла родительский элемент?

Я уверен, что эту проблему уже задавали, но я не могу найти ответа.

У меня такая разметка:

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

Я хочу, чтобы у foo была ширина 600px( width: 600px;), а у bar было следующее поведение:

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

Другими словами, вместо того, чтобы устанавливать ширину полосы, 592pxя бы хотел установить внешнюю ширину полосы, чтобы 100%она вычислялась 592px. Здесь важно то, что я могу изменить ширину foo на, 800pxи bar будет вычисляться при рендеринге, вместо того, чтобы мне приходилось делать математику для всех этих экземпляров вручную.

Возможно ли это в чистом CSS?

Еще немного повеселее:

• Что, если #barэто стол?
• Что, если #barтекстовое поле?

• Что, если #barэто ввод?

• Что если #fooэто ячейка таблицы ( td)? (Это меняет проблему или проблема идентична?)

До сих пор table#bar, input#barуже обсуждалось. Я не видел хорошего решения для textarea # bar. Я думаю, что текстовое поле без границ / полей / отступов с divоберткой может работать со divстилем, чтобы работать как границы для textarea.

ИЗМЕНИТЬ :

Все эти три разных элемента имеют разные правила рендеринга.

Таким образом, для:

table#barвам необходимо установить ширину на 100%, иначе она будет настолько широкой, насколько это необходимо. Однако, если общая ширина строк таблицы больше, чем ширина, barона расширится до необходимой ширины. Если я помню, вы можете противодействовать этому, установив, display: block !important;хотя это было некоторое время с тех пор, как ive пришлось это исправить. (Я уверен, что кто-нибудь поправит меня, если я ошибаюсь).

textarea#bari beleive - это элемент уровня блока, поэтому он будет следовать тем же правилам, что и div. Единственное предостережение здесь в том, что textareaнужно брать атрибуты colsиrows которые измеряются в символьных столбцах. Если это указано в элементе, он переопределит ширину, указанную в CSS.

input#barявляется встроенным элементом, поэтому по умолчанию вы не можете присвоить ему ширину. Однако, как textareaи colsатрибут 's , он имеет sizeатрибут элемента, который может определять ширину. Тем не менее, вы всегда можете указать ширину, используя display: block;для нее свой CSS. Тогда он будет следовать тем же правилам рендеринга, что и div.

td#fooбудет отображаться как table-cellбезумный. Суть в том, что для ваших целей он будет действовать так же, как div#fooи ограничение ширины его содержимого. Единственная проблема здесь будет заключаться в том, что где-нибудь в столбце будет текст, который невозможно перенастроить, что заставит его игнорировать настройку ширины. Также все ячейки в столбце получат ширину самой широкой ячейки.

Это поведение по умолчанию элемента уровня блока - т.е. если ширина auto(по умолчанию), то она будет составлять 100% внутренней ширины содержащего элемента. так по сути:

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

даст вам именно то, что вы хотите.

почти там, просто измените outerWidth: 100%;на width: auto;(outerWidth не является свойством CSS)

в качестве альтернативы примените к панели следующие стили:

width: auto;
display: block;

Используйте стили

left: 0px;

или / и

right: 0px;

или / и

top: 0px;

или / и

bottom: 0px;

Я думаю, что в большинстве случаев это сработает

Итак, после исследования было обнаружено следующее:

Для div#barнастройки display:block; width: auto;вызывает эквивалентouterWidth:100%;

Для a table#barвам нужно обернуть его в div с правилами, указанными ниже. Итак, ваша структура становится:

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

Таким образом, таблица занимает родительский div на 100% и #barWrapиспользуется для добавления к #barтаблице границ / полей / отступов . Обратите внимание, что вам нужно будет установить фон всего объекта #barWrapи сделать #barего прозрачным или таким же, как #barWrap.

Для textarea#barи input#barвам нужно сделать то же самое table#bar, что и, нижняя сторона заключается в том, что, удаляя границы, вы останавливаете рендеринг собственного виджета для поля ввода / текста, а #barWrapграницы будут выглядеть немного иначе, чем все остальное, поэтому вам, вероятно, придется стиль всех ваших входных данных таким образом.