CSS：如何正确使用最小高度

Question

I'm stuck on a stupid CSS problem, which has been asked a 100 times, but never has been decently answered, or at least not for my problem. 我陷入了一个愚蠢的CSS问题，该问题已经被问了100次，但从未得到过体面的回答，或者至少不是我的问题。

I got a page with a footer, and with a side bar in bootstrap 3.3.7. 我有一个带有页脚的页面，并且在引导程序3.3.7中带有一个侧栏。 The problem I'm having is that it seems impossible to set the min-height of the page to 100%. 我遇到的问题是似乎无法将页面的最小高度设置为100％。 So I want a page, where the footer is always at the end of the page, and the page is minimum the screen height (100%) this is achieved by setting min-height to 100%, works like a charm. 所以我想要一个页脚始终位于页面末尾的页面，并且该页面的最小屏幕高度（100％）是通过将min-height设置为100％来实现的，就像魅力一样。 The problem is that inside the page there is a wrapper which needs to stretch to at least the height of the page. 问题是在页面内部有一个包装，该包装至少需要拉伸到页面的高度。 This is achieved by using the padding hack: padding-bottom: 99999px; 这是通过使用padding hack实现的： padding-bottom: 99999px; and margin-bottom: -99999px; 下margin-bottom: -99999px; . 。

However, this only works in Chrome. 但是，这仅适用于Chrome。 In all other browsers, you can scroll down for 99999 pixels. 在所有其他浏览器中，您可以向下滚动99999像素。 To prevent this, I added overflow: hidden , but this makes that the min-height is not 100% anymore. 为了防止这种情况，我添加了overflow: hidden ，但这使得最小高度不再是100％。 I've added min-height everywhere, but apparently, if you don't specify the height of the parent, it does not work. 我在所有地方都添加了最小高度，但是很明显，如果您不指定父级的高度，那么它将不起作用。

So what I'm looking for is for a way to make min-height propagate without setting height (because setting height breaks everything of course). 因此，我正在寻找一种无需设置高度即可传播最小高度的方法（因为设置高度当然会破坏一切）。

In the fiddle below I demonstrated to problem, I want the background-color of the red and the green both fill the entire height, while the footer stays at the bottom. 在下面的小提琴中，我演示了问题，我希望红色和绿色的背景色都填满整个高度，而页脚留在底部。

https://jsfiddle.net/wc9yh243/5/ https://jsfiddle.net/wc9yh243/5/

HTML: HTML：

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV class="wrapper"> 
<DIV class="width50 green">
<DIV class="content">
<DIV class="text">
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
</DIV>
</DIV>
</DIV>
<DIV class="width50 red">
<DIV class="content">
<DIV class="text">
some text which is shorter than the page
</DIV>
</DIV>
</DIV>
<DIV class="footer">
Some footer
</DIV>
</DIV>
</BODY>
</HTML>

CSS: CSS：

html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
}

.width50 {
  min-height: 100%;
  width: 49%;
  display: inline-flex;
}

.content {
  min-height: 100%;
}

.green {
  background-color: #AAFFAA;
}

.red {
  background-color: #FFAAAA;
}

.footer {
  bottom: 0;
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
  background-color: grey;
}

Answer 1

Add display:flex in wrapper css class: 在包装器CSS类中添加display：flex：

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
   display: flex;
}

Answer 2

use display:flex to the clss .wrapper as shown below: 使用display:flex到clss .wrapper ，如下所示：

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
  display:flex;/*newly added css*/
}

Answer 3

Using bootstrap you could create a basic grid where both divs are in the same container and row like so. 使用引导程序，您可以创建一个基本网格，其中两个div都位于同一容器和同一行中。 In this case the container with less text will always be the same size as the green one no matter its content. 在这种情况下，无论其内容如何，带有较少文本的容器将始终与绿色的容器相同。

HTML: HTML：

<div class="container">
 <div class="row">
  <div class="col-6 red">red and more text red and more text red and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more text</div>
   <div class="col-6 green">green</div>
  </div>
 </div>

CSS: CSS：

.red {
  background-color:red;
}

.green{
  background-color:green;
}

https://codepen.io/PMertgen/pen/KGRBbp https://codepen.io/PMertgen/pen/KGRBbp

CSS：如何正确使用最小高度

问题描述

3 个解决方案

解决方案1
1 已采纳 2018-10-19 12:17:50

解决方案2
1 2018-10-19 12:21:35

解决方案3
0 2018-10-19 12:30:56

CSS：如何正确使用最小高度

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-10-19 12:17:50

解决方案2 1 2018-10-19 12:21:35

解决方案3 0 2018-10-19 12:30:56

解决方案1
1 已采纳 2018-10-19 12:17:50

解决方案2
1 2018-10-19 12:21:35

解决方案3
0 2018-10-19 12:30:56