细分父div高度以用于子div

Question

I have a div with an specific height. i want this: i put some nested div's inside this div an tell them use specific percentage of height of the parent div. for example: div1=10%, div2=50% and div3=40% . Im talking about height.

Im using bootstrap and i can control location of parts of a row via col-* , But i want this for height of a parent div. How i can achieve this via 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 grid system will make it easy for you to make responsive columns, because that is a cumbersome part to handle yourself for differing screen-sizes without horizontal scrolling. For height, you can rely on plain CSS styles, because vertical scrolling is not a problem.

Whatever your use-case be, just remember that percent dimensions are always relative to an element's parent. So if you want to give an element a height of 10% you need to consider the question: 10% of what? .

Following snippet will hopefully make it clear to you.

Snippet :

 .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>