CSS: 如何正确使用min-height

Question

我被一个愚蠢的 CSS 问题困住了，这个问题已经被问了 100 次，但从来没有得到像样的回答，或者至少不是针对我的问题。

我在 bootstrap 3.3.7 中得到了一个带有页脚和侧边栏的页面。我遇到的问题是，似乎无法将页面的最小高度设置为 100%。所以我想要一个页面，页脚总是在页面的末尾，页面最小屏幕高度 (100%) 这是通过将最小高度设置为 100% 来实现的，效果很好。问题是页面内部有一个包装器，它至少需要拉伸到页面的高度。这是通过使用填充 hack 来实现的：padding-bottom: 99999px; 和 margin-bottom: -99999px;.

但是，这仅适用于 Chrome。在所有其他浏览器中，您可以向下滚动 99999 像素。为了防止这种情况，我添加了 overflow: hidden，但这使得最小高度不再是 100%。我在所有地方都添加了 min-height ，但显然，如果你不指定父级的高度，它就不起作用。

所以我正在寻找一种无需设置高度即可传播最小高度的方法（因为设置高度当然会破坏所有内容）。

我在下面的fiddle中演示了问题，我希望红色和绿色的背景色都填满整个高度，而页脚保持在底部。

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

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:

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

在包装器中添加 display:flex css class:

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

Answer 2

使用 display:flex 到 clss .wrapper 如下所示：

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

Answer 3

使用 bootstrap 你可以创建一个基本的网格，其中两个 div 都在同一个容器和行中，就像这样。在这种情况下，文本较少的容器将始终与绿色容器大小相同，无论其内容如何。

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:

.red {
  background-color:red;
}

.green{
  background-color:green;
}

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

CSS: 如何正确使用min-height

CSS: how to use min-height decently

html

css

height

stretch

twitter-bootstrap-3