CSS: 如何调整两个使用float 属性和auto width and height 的div 在底部对齐

Question

我正在使用 5 divs:

Main Div（用作包装器，宽度和高度设置为 auto）
sub 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，如果视口很小，它会变得更高，如果视口是大屏幕，它会变得比蓝色短 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 将使弹性项目具有相同的高度，因此如果您增加蓝色 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>

CSS: 如何调整两个使用float 属性和auto width and height 的div 在底部对齐

CSS: How to adjust two divs align at bottom which use float property and auto width and height

html

css

adjustment

CSS: 如何调整两个使用float 属性 和auto width and height 的div 在底部对齐

CSS: How to adjust two divs align at bottom which use float property and auto width and height

html

css

adjustment

CSS: 如何调整两个使用float 属性和auto width and height 的div 在底部对齐