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

88

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

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

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

Дмитрий Лихтен
источник

Ответы:

39

ИЗМЕНИТЬ :

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

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

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;}

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

блудница
источник
Привет спасибо. Также повеселился со столами, но все равно решил истекать кровью. Я предполагаю, что таблицы ведут себя так же, как div?
Дмитрий Лихтен
@Dimitry: Нет у них есть специальные правила , которые делают их более похожими , inline-blockчем blockэлементы. Обратите внимание, что я сказал, что это не то же самое, что :-) Что вы, вероятно, испытываете, так это то, что, если не указано иное, они обычно расширяются, чтобы вместить все столбцы, что может быть действительно раздражающим, если в некоторых из заголовков / ячеек есть длинный текст, который невозможно перенастроить.
prodigitalson
Спасибо за помощь :) Позвольте мне немного обновить вопрос, чтобы дать более полный обзор проблем, и, надеюсь, все обходные пути можно будет перечислить в одном разделе.
Дмитрий Лихтен
Я экспериментировал с панелью div # foo table # и установкой ширины: 100% на table # bar действительно расширяет таблицу, но границы / поля таблицы будут растекаться через div # foo. Установка для таблицы display: block не очень хорошо, так как это портит другие аспекты визуализации таблицы, такие как обработка ширины строки. textarea # bar не будет расширяться, если для ширины установлено значение auto или не установлено.
Дмитрий Лихтен
1
так как textarea#barвы должны иметь возможность установить это display: blockс небольшим побочным эффектом. Что касается таблицы, я знаю, что в прошлом я использовал какое-то решение / смягчение последствий, но я не помню, что это было на данный момент. Однако я скажу, что обычно я не устанавливаю "поля" на таблице, а скорее оборачиваю его в div с заполнением / полями ... это может быть сам #foo или другой div, используемый jsut для применения этого типа интервала. Также вы можете сделать, чтобы противодействовать проблеме с границами, чтобы применить границы только к первой / последней ячейке в строке / ячейкам в первой / последней строке
prodigitalson
28

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

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

width: auto;
display: block;
Рябина
источник
4
Это не сработает, если он устанавливает отступы на поле, barпотому что будет добавлено к 100%, что фактически будет barшире, чем его родительский элемент foo.
prodigitalson
да, я ответил на этот вопрос слишком быстро; P
Rowan
Подожди секунду. Итак, если я установлю для свойства ширину что-нибудь, оно будет просачиваться? width: auto - это не решение, а не установка ширины вообще?
Дмитрий Лихтен
2
Да, это верно. Любой элемент, который имеет display:block;(также известный как элемент уровня блока), примет это поведение. элемент DIV имеет width:auto;и display:block;установлен по умолчанию.
Rowan
Старый пост, но не мог ли он просто использовать box-sizing: border-box, чтобы отступы находились внутри ширины элемента.
CHBresser 08
16

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

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

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

Дмитрий Лихтен
источник