CSS：如何調整兩個div對齊在底部，它們使用float屬性以及自動的width和height

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彼此成比例響應。

但是問題是如果我將height:89%設置為紅色div的height:89% bottom-margin:1% ，那么它們將不會產生相同的輸出，包含紅色和綠色的sub 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：如何調整兩個div對齊在底部，它們使用float屬性以及自動的width和height

問題描述

1 個解決方案

解決方案1
2 已采納 2017-03-05 13:32:02

CSS：如何調整兩個div對齊在底部，它們使用float屬性以及自動的width和height

問題描述

1 個解決方案

解決方案1 2 已采納 2017-03-05 13:32:02

解決方案1
2 已采納 2017-03-05 13:32:02