Отображение CSS: минимальная высота таблицы не работает

104

Кто-нибудь знает, что я могу заставить минимальную высоту работать с последними браузерами? Я использую таблицы CSS и, кажется, игнорирует минимальную высоту.

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

Скрипка

css

— Саманта Джей Ти Стар
источник

1

похожее сообщение: stackoverflow.com/questions/25238/100-min-height-css-layout

— diEcho

1

Можете ли вы определить таблицы CSS ? Есть разметка?

— Alex

1

опубликуйте свой html, соответствующий CSS и, если возможно, дайте ссылку на свой сайт (или попробуйте создать jsfiddle.net ), чтобы выявить вашу проблему.

— oezi

Это все еще проблема с FireFox, хотя об ошибке сообщается уже четырнадцать лет. bugzilla.mozilla.org/show_bug.cgi?id=307866

— Frédéric

204

При использовании таблиц высота по существу равна минимальной высоте, поскольку таблицы всегда растягиваются. Просто избавьтесь от "min-", и все будет работать так, как вы ожидаете.

— Swider
источник

13

Это совершенно не интуитивно, но верно. Похоже, что наилучшие результаты приходят с установкой «фиксированной» высоты для самых внутренних display: table-cellэлементов.

— eternicode 09

4

Я не тестировал в IE, но похоже, что это единственный Firefox, который все еще страдает от этого.

— Dex

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

OP спрашивает, как заставить его работать с последней версией браузера. Я просто дал ему решение. Как это не точно?

— virajs0ni

дайте некоторую высоту, например, height: 1px, как вы сказали, затем он начал работать

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

1

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

— Ахмад Авайс
источник

1

Решение для Firefox

Добавьте высоту, чтобы разблокировать установку минимальной высоты

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

Число в высоте может быть любым другим действительным значением, меньшим или равным минимальной высоте, чтобы оно работало должным образом.

— Майк Винчестер
источник