CSS：如何调整使用浮动属性和自动宽度和高度的两个 div 在底部对齐

Question

我正在使用 5 个 div：

• Main Div（用作包装器，宽度和高度设置为auto）
• 子 div（包含两个 div，红色和蓝色，width:75% 和 height:auto）
  • 红色 div (height:90% width:auto)
  • 绿色 div (height:10% width:auto)
• 蓝色 div (width:25%height:auto)

如下图：

在当前的宽度和高度设置下，div 会按比例相互响应。

但问题是，如果我设置红色 div 的 height:89% bottom-margin:1%，那么它们不会产生相同的输出，包含红色和绿色的子 div，如果 veiwport 很小，它会变得比蓝色 div 更短如果视口是大屏幕。

我想以这样一种方式调整它，即无论我使用什么设备，绿色 div 始终保持相应调整，蓝色 div 位于底部。

现在不幸的是，我的code 似乎无法与fiddle 一起使用，snippet 也无法使用，但它可以在我的浏览器上使用，liveweave.com 也是如此。

这是liveweave.com上的工作示例

这是我的完整代码：

HTML：

<body>
  <div class="main">
    <div class="sub">
      <div class="red"></div>
      <div class="green"></div>
    </div>
    <div class="blue"></div>
  </div>
</body>

CSS：

.main{
  width: auto;
  height: auto;
 }
.sub{
  width: 75%;
  height: auto;
  float: left;
}
.red{
  width: 100%;
  height: 85%;
  background-color: red;
}
.green{
  width: 100%;
  height: 15%;
  background-color: green;
}
.blue{
  width: 25%;
  height: 100%;
  background-color: blue;
  float: right;
}

Answer 1

您可以使用Flexbox 创建此布局。默认情况下，Flexbox 会使 flex-items 的高度相同，因此如果增加蓝色 div 的高度，它也会增加 sub div 的高度。

body {
  margin: 0;
}
.main {
  min-height: 100vh;
  display: flex;
}
.blue {
  background: blue;
  flex: 1;
}
.sub {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.red {
  flex: 1;
  background: red;
}
.green {
  background: green;
  flex: 0 0 10%;
}

<div class="main">
  <div class="sub">
    <div class="red"></div>
    <div class="green"></div>
  </div>
  <div class="blue"></div>
</div>