Как сделать ширину CSS для заполнения родительского элемента?

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

У меня есть следующая разметка:

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

Мое желание состоит в том, чтобы foo имел ширину 600px (width: 600px;), и для создания бара были следующие типы поведения:

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

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

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

Немного веселее:

  • Что делать, если #bar является таблицей?
  • Что делать, если #bar является текстовым полем?

  • Что делать, если #bar является входом?

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

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

Ответы

Ответ 1

EDIT:

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

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

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

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

input#bar - это встроенный элемент, поэтому по умолчанию вы не можете назначить его ширину. Однако, как и атрибут textarea cols, он имеет атрибут 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;}

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

Ответ 2

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

примените следующие стили для отображения:

width: auto;
display: block;

Ответ 3

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

left: 0px;

или/и

right: 0px;

или/и

top: 0px;

или/и

bottom: 0px;

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

Ответ 4

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

Для параметра 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 используется для добавления границ /margin/padding в таблицу #bar. Обратите внимание, что вам нужно будет установить фон всего объекта в #barWrap, а фон #bar будет прозрачным или тем же, что и #barWrap.

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