Як зробити CSS шириною для заповнення батьківської?

88

Я впевнений, що цю проблему вже задавали раніше, але я не можу знайти відповіді.

У мене є така розмітка:

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

css 
— Дмитро Ліхтен
джерело

Відповіді:

39

РЕДАГУВАТИ :

Усі ці три різні елементи мають різні правила візуалізації.

Отже для:

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

textarea#bari beleive - це елемент рівня блоку, тому він буде дотримуватися правил так само, як і div. Єдиним застереженням є те, що textareaприймають атрибути colsі rowsякі вимірюються в стовпцях символів. Якщо це вказано в елементі, це перевизначить ширину, визначену css.

input#barє вбудованим елементом, тому за замовчуванням ви не можете призначити йому ширину. Однак подібний до атрибута textarea's 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;}

дасть вам саме те, що ви хочете.

— вундеркінд
джерело
Гей, дякую. Також весело проводячи час із таблиць, які вирішили пропустити кров у будь-якому випадку. Я припускаю, що таблиці мають таку ж поведінку, як div?
— Дмитро Ліхтен
@Dimitry: Немає у них є спеціальні правила , які роблять їх більш схожими , inline-blockніж blockелементи. Зауважте, що я сказав більше як не те саме, що :-) Що, напевно, ви відчуваєте, це те, що, якщо не визначено інше, вони, як правило, розширяться, щоб вмістити всі стовпці, що може насправді дратувати, якщо деякі заголовки / комірки мають довгий текст, який не можна розгортати.
— вундеркіндлі
Дякуємо за допомогу :) Дозвольте мені трохи оновити запитання, щоб надати набагато більш повний огляд проблем, і, сподіваюся, усі обхідні шляхи можна перерахувати в одному розділі.
— Дмитро Ліхтен
Я експериментував з панеллю div # foo table # та встановлюючи ширину: 100% на таблиці # bar дійсно розширить таблицю, але межі / поля таблиці будуть просочуватися через div # foo. Налаштування таблиці для відображення: блок не є хорошим, оскільки він викривлює інші аспекти візуалізації таблиці, такі як обробка ширини рядка. Панель textarea # не розширюватиметься, якщо для ширини встановлено значення авто або не встановлено.
— Дмитро Ліхтен
1
адже textarea#barви повинні мати змогу встановити це на display: blockнезначний шкідливий ефект. Що стосується таблиці, я знаю, що раніше використовував якийсь спосіб вирішення / пом’якшення, але я не пам’ятаю, що це було на даний момент. Однак я скажу, що я зазвичай не встановлюю "поля" в таблиці, а навпаки, обертаю їх у div з доповненням / полями ... це може бути сам #foo або інший div, який використовує jsut для застосування цього типу інтервалів. Також ви можете зробити, щоб протидіяти проблемі кордону, щоб застосувати межі лише до першої / останньої комірки в рядку / комірок у першому / останньому рядку
— prodigitals9
28

майже там, просто змініть outerWidth: 100%;на width: auto;(externalWidth не є властивістю CSS)

Або ж застосуйте до панелі такі стилі:

width: auto;
display: block;
— Горобина
джерело
4
Це не спрацює, якщо він встановлює заповнення поля, barоскільки його буде додано до 100%, ефективно роблячи barширшим, ніж його батько foo.
— вундеркіндлі
так, я відповів, що занадто швидко; P
— Роуен
Почекайте секунду. Отже, якщо я встановлю для властивості width щось, воно буде просочуватися? width: auto - це не рішення, швидше не встановлення ширини взагалі?
— Дмитро Ліхтен
2
так, це правильно. Будь-який елемент, який має display:block;(також відомий як елемент рівня блоку), прийме таку поведінку. елемент DIV має width:auto;та display:block;встановлюється за замовчуванням.
— Роуен
Стара публікація, але чи не міг він просто використати box-sizing: border-box, щоб прокладки були всередині ширини елемента.
— CHBresser
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межі будуть виглядати дещо інакше, ніж усе інше, тому вам, мабуть, доведеться оформити всі свої входи таким чином.

— Дмитро Ліхтен
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.