Question

一直在堆栈寻找答案，没有什么适合我的具体情况：

我有一个父div，其中我有两个水平排列的子div。我想几乎填满父div中的所有额外空间（以紫色显示）。我想把div用红色并上下拉以填充父级，以便列背景全部为红色，同样，右侧div填充上下，整个背景填充为蓝色。下面是我的div结构

<div class="container">
  <div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
    <div class="row">
      <div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
        <div class="col-xs-12 text-center">
          <h3 class="heading-s1">TEXT</h3>\
        </div>
      </div>
      <div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
        <div class="col-xs-12 text-center">
          <h4>TEXT</h4>
          <p>TEXT</p>
        </div>
      </div>
    </div>
  </div>

</div>

为了更清楚：我希望我的最后一件事看起来像这样：

Answer 1

我想你可能正在寻找这样的东西。

.container {
  height:500px;
}

.container #parent {
  height:100%;
}

.container #parent .row {
  height:100%;
  position: relative;
}

.container #parent .row #child-left {
  height: 100%;
  width:30%;
  background-color: blue;
  float:left;
}

.container #parent .row #child-right {
  height: 100%;
  width:70%;
  background-color: yellow;
  float: right;

}

我不确定.container，#parent和row的样式是什么，所以我列出了可能是他们的样式。但这里的答案/解决方案的核心是样式的最后两个块。这个想法是，父母的两个孩子必须拥有100％的身高。

在此处查看演示：https://jsfiddle.net/an6t1yj3/

如果你不能，这就是小提琴的输出：

Answer 2

您good_reviews_true = bus_rev[bus_rev['good_reviews'] == True] good_reviews_false = bus_rev[bus_rev['good_reviews'] == False] bus_rev_subset = pd.concat([good_reviews_true.head(len(good_reviews_false)), good_reviews_false.head(len(good_reviews_true))])个值。

display: table

https://jsfiddle.net/mj87kucy/

在父div中嵌套div填充区域

2 个答案: