Question

我使用最新的Bootstrap，并且有一个简单的两列布局。我想用颜色填充右栏中包含的div。要做到这一点，我需要与容器具有相同的高度，但height: 100%不起作用。

<div class="container-fluid">
    <div class="row row-eq-height">
        <div class="col-xs-6">
            a<br/>
            b<br/>
            c
        </div>
        <div class="col-xs-6">
            <div style="background-color: red;">
                Just text
            </div>
        </div>
    </div>
</div>

此示例使用Bootstrap框架定义的row-eq-height。

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

这就是它的外观

enter image description here

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

Answer 1

如果您只需要background-color，那么您可以使用pseudo element。你必须知道父容器的填充，这是不幸的。

<强> JSFiddle

<强> HTML

<div class="container-fluid">
    <div class="row row-eq-height">
        <div class="col-xs-6">
            a<br/>
            b<br/>
            c
        </div>
        <div class="col-xs-6">
            <div style="background-color: red;">
                Just text
            </div>
        </div>
    </div>
</div>

<强> CSS

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.col-xs-6:last-of-type {
    position: relative;
}
.col-xs-6:last-of-type > div::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: calc(100% - 30px); /* 100% of .col-xs-6 minus left and right padding */
    background-color: red;
}

Answer 2

在使用flex框后，我找到了解决此问题的方法。

<div class="container-fluid">
    <div class="row row-eq-height">
        <div class="col-xs-6 left">
            <div class="left-background">
                a<br/>
                b<br/>
                c
            </div>
        </div>
        <div class="col-xs-6 right">
            <div class="right-background">
                Just text
            </div>
        </div>
    </div>
</div>

CSS实施如下。基本结构是：row > column > background container。背景容器中的关键位是flex: 1，这指示兄弟姐妹的大小相等。

.row-eq-height {
    display: flex;
}
.left {
    display: flex;
    flex-direction: column;
}
.right {
    display: flex;
    flex-direction: column;
}
.right-background {
    background-color: red;
    flex: 1;
}
.left-background {
    background-color: green;
    flex: 1;
}

该演示位于JSFiddle。

具有相同高度的Bootstrap双列布局

2 个答案: