无法使用bootstrap设置div的屏幕高度的最大高度

Question

我在Django中使用bootstrap，我一直在尝试设置div的最大高度=屏幕高度的75%，因为它里面有一张很大的图片。因此，我尝试将图片的父div调整到设备屏幕的75%，但这似乎不起作用。我用过class="mh-75"，但它不起作用。我进一步加载静态css文件，以便用max-height: 75%;设置样式，但仍然不起作用。代码如下：

{% extends 'testapp/base.html' %}
{% block content %}
    {% for image in Image %}
        <div class= "container-fluid pd-2 pt-2 mh-75">
            <div class="bg-dark text-white rounded p-1">
                <img class="img-responsive img-wid img-fluid mx-auto d-block" src="{{ image.url }}" alt="{{ image.name }}">
                <div class="pt-2 text-center"><p>Source: {{ image.source }}</p></div>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

我不认为这会有什么帮助，但img-wid风格：

.img-wid{
    max-width: 99.999%;
}

Answer 1

您可以创建一个div来获取屏幕的100%，然后使用bootstrap来获取75%，如果如下所示：

.main-container{
  height: 100vh;
}

<div class="main-container">
  <div class="h-75">
    //Your stuff here
  </div>
</div>