CSS：如何体面地使用最小高度答案

【问题标题】：CSS: how to use min-height decentlyCSS：如何体面地使用最小高度
【发布时间】：2023-04-25 03:31:01
【问题描述】：

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

我在 bootstrap 3.3.7 中有一个带页脚和侧边栏的页面。我遇到的问题是似乎不可能将页面的最小高度设置为 100%。所以我想要一个页面，页脚总是在页面的末尾，页面最小是屏幕高度（100%）这是通过将 min-height 设置为 100% 来实现的，就像一个魅力。问题是页面内部有一个包装器，它至少需要拉伸到页面的高度。这是通过使用填充黑客来实现的：padding-bottom: 99999px; 和 margin-bottom: -99999px;。

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

所以我正在寻找一种在不设置高度的情况下使最小高度传播的方法（因为设置高度当然会破坏一切）。

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

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;
}

【问题讨论】：

为.wrapper添加display: flex;，所有项目都会自动拉伸。

标签： html css twitter-bootstrap-3 height stretch

【解决方案1】：

在包装css类中添加display:flex：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用引导程序，您可以创建一个基本网格，其中两个 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

【讨论】：