Question

我正在使用5个div：

Main Div（作为包装，宽度和高度设置为auto）
sub div（包含两个div，红色和蓝色，width:75%和height:auto）
- red div（height:90% width:auto)
- 绿色div（height:10% width:auto）
blue 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的高度相同，所以如果你增加blue 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属性和自动宽度和高度的两个div对齐

1 个答案: