CSS-дисплей: мінімальна висота таблиці не працює

104

Хтось знає, що я можу змусити працювати на мінімальній висоті з останніми браузерами? Я використовую таблиці CSS і, здається, ігнорує міні-висоту.

<div style="background-color: red; display: table; min-height: 100px;">
abc
</div>

Скрипка

css

— Саманта JT Star
джерело

1

аналогічний пост: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

Чи можете ви визначити таблиці CSS ? Отримали якусь розмітку?

— alex

1

опублікуйте свій HTML, згідно css та, якщо можливо, надішліть посилання на ваш сайт (або спробуйте створити jsfiddle.net ), щоб виявити свою проблему.

— оезі

Проблему з FireFox досі не вдається, хоча про помилку повідомляється з чотирнадцяти років. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Фредерік

204

При використанні таблиць висота по суті становить мінімальну висоту, оскільки таблиці завжди розтягуються. Просто позбудьтеся від «міні-», і воно буде працювати, як ви очікуєте.

— swider
джерело

13

Це абсолютно неінтуїтивно, але точково. Здається, найкращі результати ставлять «фіксовану» висоту на найпотаємніші display: table-cellелементи.

— eternicode

4

Я не проходив тестування в IE, але, здається, Firefox є єдиним, хто все ще впливає на це.

— Декс

2

Підтверджено, що heightпрацює і min-heightне працює в Chrome 37, Safari 7 та FF 32 на mac. IE11 на Win 8.1 дає правильну поведінку в обох. jsfiddle.net/nuwcyvwn/1

— Стефан Мюллер

1

Неправда. Якщо я хочу, щоб таблиця була завдовжки 8 дюймів (я використовую css для управління друком), і їй не вистачає рядків, щоб заповнити її, але у мене визначено tfoot, я можу надати розпірну рядок (дозволено розтягуватися вертикально), визначаючи при цьому висота в інших моїх рядах, щоб переконатися, що їх немає, і те, що я отримую, - це великий розрив, який тримає колонтитул там, де він повинен бути. Відмінно працює в Chrome, але не FF або PDF-конвертер, який я використовую; wkhtmltopdf. Так, висота працює, але семантично не означає те саме, що мінімальна висота.

— rainabba

7

Використовуйте height: 1px;на столі або будь-яке значення. В основному потрібно надати таблиці деяку висоту, щоб з ним працювати min-height. Тільки min-heightне працюватимуть над таблицями у Firefox.

— virajs0ni
джерело

4

ОП запитує, як змусити його працювати з останніми браузерами. Я просто дав йому рішення. Як це не точно?

— virajs0ni

дайте трохи висоти, як висота: 1px, як ви сказали, тоді вона почала працювати

— Мохамед Хуссей

1

Кожного разу, коли ви використовуєте display:table;чи будь-яку глибшу властивість, як-от, display:table-cell;використовуйте heightзамість цього min-height. Як і в таблицях висота = мінімальна висота з урахуванням функції автоматичного прольоту в них.

— Ахмад Авайс
джерело

1

Рішення для Firefox

Додайте висоту, щоб розблокувати налаштування мінімальної висоти

div {
    display: table;
    width: 100%;
    height: 0;
    min-height: 100px;
}

Число у висоту може бути будь-яким іншим реальним значенням, меншим або рівним мінімальної висоти, щоб змусити його працювати, як очікувалося.

— Майк Вінчестер
джерело