在两个 div 中拆分页面，滚动时背景颜色不会在两个 div 上填充 100% 的高度答案

【问题标题】：split page in two divs, when scrolling the background-color does not fill 100% height on both divs在两个 div 中拆分页面，滚动时背景颜色不会在两个 div 上填充 100% 的高度
【发布时间】：2017-04-24 09:55:11
【问题描述】：

我正在尝试将页面拆分为具有 100% 高度和背景颜色的两个 div。。

当您滚动页面时，问题就开始了：第二个 div 的背景色没有填充 100% 的高度（第二个 div 的内容小于另一个）。

HTML 代码

<div class="wrap">
    <div class="floatleft">
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
    </div>
    <div class="floatright"><p>s</p><p>s</p></div>
    <div style="clear: both;"></div>
</div>

CSS

body, html { height: 100%; margin: 0;}

.wrap{ min-height:100%; height: 100%;}

.floatleft{background-color:red; min-height:100%;  float:left;  width: 50%; }

.floatright{background-color:yellow; float:right; min-height:100%;  width: 50%; }

我在 stackoverflow 上发现了类似的问题，但没有人可以帮助我解决这个特殊情况。

这里是小提琴：https://jsfiddle.net/jprohj09/

【问题讨论】：

使用 display:flex 方法并移除高度
你不能在任何地方都设置一个高于 100% 的恒定高度吗？在这种情况下，它将采用视口高度。但是，如果您的左侧 div 具有静态内容，您可以使用该高度

标签： html css

【解决方案1】：

您可以在.wrap 上使用display:flex，这样两列的高度相同。见下面的sn-p：

或jsfiddle

body, html {
  height: 100%;
  margin: 0;
}
.wrap{ display:flex;width:100%}
.floatleft{background-color:red;  width:50%}
.floatright{background-color:yellow;width:50%  }

<div class="wrap">
    <div class="floatleft">
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
    </div>
    <div class="floatright"><p>s</p><p>s</p></div>
    <div style="clear: both;">
</div>

【讨论】：

【解决方案2】：

尝试使用flexbox 模型

body, html {
  height: 100%;
  margin: 0;
}
.wrap { 
  display: flex;
  min-height:100%;
}
.floatleft,
.floatright {
  flex: 0 0 50%;
  max-width: 50%;
}
.floatleft {background-color:red;}
.floatright{background-color:yellow;}

<div class="wrap">
    <div class="floatleft">
      <p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
    </div>
    <div class="floatright"><p>s</p><p>s</p></div>
    <!-- you can skip this one <div style="clear: both;"> -->
</div>

【讨论】：

【解决方案3】：

这可能会解决您的问题jsfiddle。使用display:table 进行换行。

CSS：

body, html {
  height: 100%;
  margin: 0;
}
.wrap{ min-height:100%; height: 100%;display: table;width: 100%;}
.floatleft{background-color:red; min-height:100%;  float:left;  width: 50%; }
.floatright{background-color:yellow; float:right; min-height:100%;  width: 50%; }
.wrap > div{    display: table-cell;float:none;}

【讨论】：