Question

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

我在Bootstrap 3.3.7中获得了一个带有页脚和侧边栏的页面。我遇到的问题是似乎无法将页面的最小高度设置为100％。所以我想要一个页面，页脚始终位于页面的末尾，并且页面的最小屏幕高度（100％）这是通过将最小高度设置为100％来实现的，就像魅力一样。问题是在页面内部有一个包装，该包装至少需要拉伸到页面的高度。这是通过使用填充技巧：padding-bottom: 99999px;和margin-bottom: -99999px;来实现的。

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

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

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

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

在包装器CSS类中添加display：flex：

.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

使用引导程序，您可以创建一个基本网格，其中两个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：如何正确使用最小身高

3 个答案: