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

Question

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

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

<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, и бар будет вычисляться при рендеринге, вместо того, чтобы мне приходилось делать математику для всех этих случаев вручную.

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

Еще немного веселья:

• Что если #bar таблица?
• Что если #bar является текстовой областью?

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

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

---

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

Answer 1

EDIT

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

Так для:

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

textarea#bar i 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;}

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

Answer 2

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

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

width: auto;
display: block;

Answer 3

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

left: 0px;

или / и

right: 0px;

/ или

top: 0px;

/ или

bottom: 0px;

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

Answer 4

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

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

Для 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 будет выглядеть немного иначе, чем все остальное, поэтому вам, вероятно, придется стилизовать все ваши входные данные таким образом.