如何为引导容器设置最小高度

Question

我对引导程序中的容器有一些问题。我的目标是拥有一个与内容一样高的容器。例如：

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

在上面的例子中，容器应该只和图片一样高。然而，即使我通过 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;
}

有人知道如何解决这个问题吗？

Answer 1

这里发生了两件事。

1. 您没有正确使用容器类。
2. 您正在尝试为容器类覆盖 Bootstrap 的 CSS

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>

Here你可以找到更多关于 Bootstrap 网格系统的信息。

话虽如此，如果您绝对必须覆盖 Bootstrap CSS，那么我会尝试在我的 CSS 定义中使用“！important”子句......

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

但我一直发现“！important”子句只会让 CSS 变得混乱。

Answer 2

通常，如果您使用引导程序，您可以将最小高度设置为 100%。

 <div class="container-fluid min-vh-100"></div>

这也将解决页脚不粘在底部的问题。

您也可以使用以下类从 CSS 中执行此操作

.stickDamnFooter{min-height: 100vh;}

如果这个类没有粘住你的页脚，只需添加 position: fixed;到同一个css类，你一生都不会遇到这个问题。干杯。

Answer 3

您是否在您的.container div 上尝试过height: auto;？

这里是fiddle，如果你改变img高度，容器高度会随之调整。

编辑

因此，如果您“不能”更改内联 min-height，则可以使用 !important 参数覆盖内联样式。这不是最干净的方法，但可以解决您的问题。

将此行添加到您的.containerclass

min-height:0px !important;

我已经更新了我的小提琴来给你一个例子。