Как установить минимальную высоту для загрузочного контейнера

У меня есть некоторые проблемы с контейнером в bootstrap. Моя цель состоит в том, чтобы иметь контейнер, который только высок, как содержание. Например:

<div class="container">
  <img src="#.jpg" height="200px" width="300px">
</div>

В приведенном выше примере контейнер должен быть только выше, чем изображение. Однако, хотя я установил min-height для контейнера с помощью CSS в 0px, мой браузер автоматически интегрирует минимальную высоту 594px в стиле элемента. Исходный код в браузере выглядит так:

<div class="container" style="min-height: 594px;">
  <img src="#.jpg" height="200px" width="300px">
</div>

Но в файле HTML элемент стиля не определен. Это происходит как с Chrome, так и с IE. Следовательно, код CSS (min-height: 0px;) игнорируется.

CSS

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px;
}

Кто-нибудь знает, как я могу исправить эту проблему?

Ответы

Ответ 1

Здесь происходят две вещи.

  • Вы не используете класс контейнера должным образом.
  • Вы пытаетесь переопределить CSS Bootstrap для класса контейнера

В Bootstrap используется сетка, а класс .container определен в собственном CSS. Сетка должна существовать в контейнерном классе DIV. Контейнер DIV - это всего лишь указание на Bootstrap, что внутри этой сетки этот родитель. Поэтому вы не можете установить высоту контейнера.

Что вы хотите сделать, это следующее:

<div class="container-fluid"> <!-- this is to make it responsive to your screen width -->
    <div class="row">
        <div class="col-md-4 myClassName">  <!-- myClassName is defined in my CSS as you defined your container -->
            <img src="#.jpg" height="200px" width="300px">
        </div>
    </div>
</div>

Здесь вы можете найти дополнительную информацию о сетке Bootstrap.

При этом, если вы абсолютно ДОЛЖНЫ переопределить CSS Bootstrap, я бы попытался использовать предложение "! important" для моего определения CSS как такового...

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 900px;
   overflow:hidden;
   min-height:0px !important;
}

Но я всегда обнаружил, что предложение "! important" просто создает беспорядочный CSS.

Ответ 2

Вы пробовали height: auto; на своем .container div?

Ниже приведена fiddle, если вы измените высоту img, высота контейнера приспособится к ней.

ИЗМЕНИТЬ

Итак, если вы не можете изменить встроенный min-height, вы можете перезаписать встроенный стиль с параметром !important. Это не самый чистый способ, но он решает вашу проблему.

добавьте в класс .container эту строку

min-height:0px !important;

Я обновил свою скрипку, чтобы дать вам пример.