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

Question

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

У меня есть следующий код:

<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.

Answer 1

EDIT:

Ну те, три разных элемента имеют разные правила redndering ха-ха.

Так:

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

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

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

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

width: auto; 
display: block; 

Answer 3

Таким образом, после исследования следующих обнаружено:

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

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

Answer 4

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

left: 0px; 

или/и

right: 0px; 

или/и

top: 0px; 

или/и

bottom: 0px; 

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