Высота на 100% больше, чем родительский div — bootstrap

#html #css #bootstrap-4 #frontend #height

#HTML #css #bootstrap-4 #интерфейс #высота

Вопрос:

Я разрабатываю проект, в котором я использую карточки bootstrap. Я также должен сделать его совместимым с Chromium 57.xx по некоторым причинам в компании, в которой я работаю — вот где возникла проблема. Я использую height: 100% для карточек, и они абсолютно одинаковой высоты в Chrome, Firefox, Edge, Opera и т.д. У меня недостаточно репутации для публикации изображений, поэтому я буду размещать ссылки на изображения. Когда я использую Chromium, это выглядит так:

https://i.epvpimg.com/cUzQdab.png

Хотя они имеют одинаковую высоту, высота намного выше, чем должна быть.

Чего я хочу достичь, так это этого:https://i.epvpimg.com/dTKdgab.png

Когда я отключаю height 100, высота родительского элемента выглядит следующим образом: https://i.epvpimg.com/ppkjaab.png

Есть идеи? Спасибо.

Ответ №1:

Я исправил это, добавив класс d-flex к родительскому элементу, удалил класс h-100 из дочернего элемента и добавил класс flex-fill к дочернему элементу. Работает отлично.