Question

我有一个特定身高的div。我想要这个：我在这个div里放了一些嵌套的div's告诉他们使用父div的特定高度百分比。例如：div1=10%, div2=50% and div3=40%。我在谈论身高。

我使用bootstrap，我可以通过col-*控制行的各个部分的位置，但我想要这个父div的高度。我如何通过Bootstrap实现这一目标？

<div id="parent" stele="height:500px;">
 <div class="child">text 1</div>
 <div class="child">text 2</div>
 <div class="child">text 3</div>
</div>

Answer 1

Bootstrap网格系统可以让您轻松制作响应列，因为对于不同的屏幕尺寸而不进行水平滚动来处理自己是一个麻烦的部分。对于高度，您可以依赖纯CSS样式，因为垂直滚动不是问题。

无论您的用例是什么，只需记住百分比维度始终相对于元素的父级。因此，如果您想为元素提供 10％的高度，您需要考虑以下问题： 10％的内容？。

以下代码片段希望能让您清楚了解。

<强>段：

.parent { height: 120px; border: 1px solid gray; }
.parent div:nth-child(1) { height: 20%; background-color: #f00; }
.parent div:nth-child(2) { height: 50%; background-color: #00f; }
.parent div:nth-child(3) { height: 30%; background-color: #0f0; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="parent col-xs-10 col-xs-offset-1">
            <div class="child">text 1</div>
            <div class="child">text 2</div>
            <div class="child">text 3</div>
        </div>
    </div>
</div>

分割父div高度以用于子div

1 个答案: