设置浮动div的高度以填充其下的区域

Question

我的内容div中有很多DIV，其中一些漂浮在右侧，一些漂浮在屏幕上大于400px。

工作小提琴是https://jsfiddle.net/cmbpt1hd/

我希望区域高度为3，以便在大于400px的屏幕上填充其下的所有区域

请记住

1. 可能有很多DIV在区域之上 - 三个向右浮动。
2. 内容div中可能有许多DIV向左浮动。

首选CSS解决方案。

我的代码

#content {
  box-sizing: border-box;
  width: 100%;
}

.area-one {
  box-sizing: border-box;
  float: right;
  width: 30%;
  background-color: #ffa2a2;
  padding: 8px;
}

.area-two {
  box-sizing: border-box;
  float: left;
  width: 70%;
  background-color: #a4dca4;
  padding: 8px;
}

.area-three {
  box-sizing: border-box;
  float: right;
  width: 30%;
  background-color: #8282ff;
  padding: 8px;
}

#footer {
  clear: both;
  width: 100%;
  background-color: #ff8282;
}

@media only screen and (max-width: 400px) {
  .area-one,
  .area-two,
  .area-three {
    float: none;
    width: 100%;
  }
}

<div id="content">

  <div class="area-one">
    Area-one, Area-one.
  </div>

  <div class="area-two">
    Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two,
    Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two.
  </div>

  <div class="area-three">
    Area-three, Area-three.
  </div>

</div>

<div id="footer">
  Footer, Footer, Footer.
</div>

这就是我想要的

Answer 1

看一下flex-box，并将你的HTML分开，这样你就可以将左侧的div和右侧的div包装在他们自己的div中：

如果你包装你的浮动div，你不必给它们每个宽度和浮动，你可以更自由地添加新的div。

Flex-box非常适合填充空白区域或使div分布均匀。

＆＃13;

＆＃13;

#content {
  box-sizing: border-box;
  width: 100%;
  display:flex;
}
.area {
  box-sizing:border-box;
  float:left;
  clear:left;
  width:100%;
  padding: 8px;
  flex-grow:1;
}
.area-one {
  background-color: #ffa2a2;
}
.area-two {
  background-color: #a4dca4;
  flex-grow:0;
}
.area-three {
  background-color: #8282ff;
}
#footer {
  clear: both;
  width: 100%;
  background-color: #ff8282;
}

.float-left {
  width:70%;
}

.float-right {
  width:30%;
}

.float-box {
  display:flex;
  float:left;
  flex-direction:column;
}

@media only screen and (max-width: 400px) {
  .float-left, .float-right {
    float: none;
    width: 100%;
    display: block;
  }
  #content {
    display:block;
  }
}

＆＃13;

<div id="content">
  <div class="float-box float-left">
    <div class="area area-one">
      Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. Area-one, Area-one. 
    </div>
  </div>

  <div class="float-box float-right">
    <div class="area area-two">
      Area-two, Area-two.
    </div>

    <div class="area area-three">
      Area-three, Area-three.
    </div>
  </div>

</div>

<div id="footer">
  Footer, Footer, Footer.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

jQuery解决方案：

＆＃13;

＆＃13;

function getHeight() {
  if ($(window).width() >= 400) {
    var areaOne = $('.area-one').height();
    var areaTwo = $('.area-two').height();

    var h = areaTwo - areaOne;
    $('.area-three').css('minHeight', h);
  } else {
    $('.area-three').removeAttr('style');
  }
}

getHeight();
$(window).on('resize', function() {
  getHeight();
});

＆＃13;

#content {
  box-sizing: border-box;
  width: 100%;
}

.area-one {
  box-sizing: border-box;
  float: right;
  width: 30%;
  background-color: #ffa2a2;
  padding: 8px;
}

.area-two {
  box-sizing: border-box;
  float: left;
  width: 70%;
  background-color: #a4dca4;
  padding: 8px;
}

.area-three {
  box-sizing: border-box;
  float: right;
  width: 30%;
  background-color: #8282ff;
  padding: 8px;
}

#footer {
  clear: both;
  width: 100%;
  background-color: #ff8282;
}

@media only screen and (max-width: 400px) {
  .area-one,
  .area-two,
  .area-three {
    float: none;
    width: 100%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">

  <div class="area-one">
    Area-one, Area-one.
  </div>

  <div class="area-two">
    Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two,
    Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two, Area-two.
  </div>

  <div class="area-three">
    Area-three, Area-three.
  </div>

</div>

<div id="footer">
  Footer, Footer, Footer.
</div>

＆＃13;

＆＃13;

＆＃13;

<强> JSFiddle