容器div不会触及页面的底部

Question

我知道经常有这样的问题，我已经尝试了所有可以找到的东西。我有一个div放在另一个div的左边。有问题的div称为light-gray。右边的div称为white-green。 white-green div基于比light-gray更多的内容触及页面底部，并将高度设置为自动。哪个没关系，但我希望light-gray div一直到页面底部。我尝试过bottom: 0;，margin-bottom: 0px;，height: 100%;。我所做的一切都在起作用。灰色容器的代码是：

.light-gray {
    background-color: #E0E0E0;
    width: 33.5%;
    padding-top: 150px;
    bottom: 0;
    margin-bottom: 0;
}
.light-gray-container {
    left: 15%;
    position: relative;
    width: 80%;
    height: auto;
    padding-bottom: 40px;
}

<div class="light-gray">
    <div class="light-gray-container">
    </div>
</div>

要查看此消息，您可以click here

div是左边的最后一部分。你会发现它下面有空白区域。

关于该怎么做的任何想法？

Answer 1

以下示例解决了该问题。基本上，你将左侧的div放在一个父div中。然后将两个父div放在另一个主div中，并设置主div以将其内容显示为flexbox（display: flex）。默认情况下，flexbox与元素一起操作，就好像它们是行一样。在这种情况下，您的行中将有两个div（左列和右列）。

然后你有剩下两个div的两个选择：

1. 您可以简单地将父容器的背景颜色设置为与灰色容器相同的颜色。请参阅下面的第一个示例1 。
2. 或者，您也可以将左侧div的显示设置为也显示为flexbox（display: flex）。但是，因为您现在有两个项目堆叠在一起，您需要设置flex-direction: column。最后，由于第二个div可能无法填满所有剩余空间，因此您可以设置其flex-grow属性。这将使其填充剩余的空间。请参阅下面的示例2 。

示例1 - 外部div上的Flexbox，左侧内部div上的背景颜色。

＆＃13;
＆＃13;
.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  border: solid;
}
.col:first-child {
  width: 25%;
  background-color: lightgrey;
}
.col:nth-child(2) {
  width: 75%;
  padding: 1em;
}
.inner {
  padding: 1em;
}
.inner:first-child {
  background-color: lightgreen;
}
.inner:nth-child(2) {
  background-color: lightgrey;
}
＆＃13;
<div class="row">
  <div class="col">
    <div class="inner">Inner 1</div>
    <div class="inner">Inner 2</div>
  </div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
＆＃13;
＆＃13;
＆＃13;

示例2 - 外部div上的行flexbox，左内部div上的列flexbox，flex-grow用于展开左列中的最后一个div

＆＃13;
＆＃13;
.row {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.col {
  border: solid;
}
.col:first-child {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 25%;
}
.col:nth-child(2) {
  width: 75%;
  padding: 1em;
}
.inner {
 padding: 1em; 
}
.inner:first-child {
  background-color: lightgreen;
}
.inner:last-child {
  background-color: lightgrey;
  flex-grow: 1;
}
＆＃13;
<div class="row">
  <div class="col">
    <div class="inner">Inner 1</div>
    <div class="inner">Inner 2</div>
  </div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
＆＃13;
＆＃13;
＆＃13;