Question

我正在尝试使用嵌套行创建布局。我的问题是，如果我让第一个嵌套行自动确定其高度（从其内容），那么我无法可靠地设置第二个的高度。我希望将第二个设置为height:100%将考虑第一行div，但它不会，而是溢出容器。

在下面的示例中，class="orange"的div是第一个，而class="blue"的div是溢出容器的罪魁祸首。

虽然我可以将每个嵌套行设置为父级的百分比，因此有这个功能，但我希望在bootstrap中有一个更好的解决方案来解决这个问题。我不想要的原因是我想要一个标题，并让第一行成为该标题的大小。

以下是我正在尝试的示例布局：

.blue {
    background-color: blue;
}
.orange {
    background-color: orange;
}
.green {
    background-color: green;
}
.full-height {
    height: 100%;
}

#main {
    height: 200px;
    width: 100%;
    background-color: gray;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="main">
    <div class="container-fluid full-height">
        <div class="row full-height">
            <div class="col-xs-3 green full-height">
                Words!
            </div>
            <div class="col-xs-9 full-height">
                <div class="row orange"> Words! </div>
                <div class="row blue full-height"> Other words!</div>
            </div>

        </div>
    </div>
</div>

JSFiddle

Answer 1

您应该将橙色行嵌套在蓝色行中，如下所示：

＆＃13;

.blue {background-color: blue;}
.orange {background-color: orange;}
.green {background-color: green;}
.full-height {height: 100%;}
#main {height: 200px; width: 100%; background-color: gray;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main">
    <div class="container-fluid full-height">
        <div class="row full-height">
            <div class="col-xs-3 green full-height">
                Words!
            </div>
            <div class="col-xs-9 full-height">
                <div class="row blue full-height">
                     <div class="col-xs-12">
                         <div class="row orange">
                              <div class="col-xs-12">Words!</div>
                         </div>
                         Other words!
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

http://jsfiddle.net/759v0hyL/2/

如何使两个嵌套的Bootstrap行一起填充其父列？

1 个答案: