Html 如何设置引导容器的最小高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25854496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set min-height for bootstrap container
提问by Clems
I have some issues with the container in bootstrap. My goal is to have a container which is only as high as the content. For example:
我在引导程序中的容器有一些问题。我的目标是拥有一个仅与内容一样高的容器。例如：
<div class="container">
<img src="#.jpg" height="200px" width="300px">
</div>
In the example above, the container should be only as high as the image. However, even though I set min-height for the container via CSS to 0px, my browser automatically integrates a min-height of 594px in the element style. The source code in the browser looks like this:
在上面的例子中，容器应该只和图像一样高。但是，即使我通过 CSS 将容器的 min-height 设置为 0px，我的浏览器也会自动在元素样式中集成 594px 的 min-height。浏览器中的源代码如下所示：
<div class="container" style="min-height: 594px;">
<img src="#.jpg" height="200px" width="300px">
</div>
But in the HTML file the style element is not defined. This occurs with Chrome as well as IE. Hence, the CSS code (min-height: 0px;) is being ignored.
但是在 HTML 文件中没有定义 style 元素。Chrome 和 IE 都会发生这种情况。因此，CSS 代码 (min-height: 0px;) 被忽略。
CSS:
CSS：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 900px;
overflow:hidden;
min-height:0px;
}
Has anyone an idea on how I can fix this issue?
有没有人知道我如何解决这个问题？
采纳答案by MikeV
Two things are happening here.
这里正在发生两件事。
- You are not using the container class properly.
- You are trying to override Bootstrap's CSS for the container class
- 您没有正确使用容器类。
- 您正在尝试为容器类覆盖 Bootstrap 的 CSS
Bootstrap uses a grid system and the .container class is defined in it's own CSS. The grid has to exist within a container class DIV. The container DIV is just an indication to Bootstrap that the grid within has that parent. Therefore, you cannot set the height of a container.
Bootstrap 使用网格系统，并且 .container 类是在它自己的 CSS 中定义的。网格必须存在于容器类 DIV 中。容器 DIV 只是 Bootstrap 的一个指示，表明其中的网格具有该父级。因此，您不能设置容器的高度。
What you want to do is the following:
您想要做的是以下内容：
<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>
Hereyou can find more info on the Bootstrap grid system.
在这里您可以找到有关 Bootstrap 网格系统的更多信息。
That being said, if you absolutely MUST override the Bootstrap CSS then I would try using the "!important" clause to my CSS definition as such...
话虽如此，如果你绝对必须覆盖 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;
}
But I have always found that the "!important" clause just makes for messy CSS.
但我一直发现“！important”子句只会使 CSS 变得混乱。
回答by Ramiz Wachtler
Have you tried height: auto;on your .containerdiv?
你试过height: auto;你的.containerdiv吗？
Here is a fiddle, if you change img height, container height will adjust to it.
这是一个小提琴，如果您更改 img 高度，容器高度将随之调整。
EDIT
编辑
So if you "can't" change the inline min-height, you can overwrite the inline style with an !importantparameter. It's not the cleanest way, but it solves your problem.
因此，如果您“不能”更改 inline min-height，则可以使用!important参数覆盖内联样式。这不是最干净的方法，但它可以解决您的问题。
add to your .containerclass this line
.container将此行添加到您的班级
min-height:0px !important;
min-height:0px !important;
I've updated my fiddle to give you an example.
我已经更新了我的小提琴给你一个例子。
回答by jerryurenaa
Usually, if you are using bootstrap you can do this to set a min-height of 100%.
通常，如果您使用引导程序，您可以这样做以将 min-height 设置为 100%。
<div class="container-fluid min-vh-100"></div>
this will also solve the footer not sticking at the bottom.
这也将解决页脚不粘在底部的问题。
