android: How to make div in grid view be of 90% height of page

mercredi 5 août 2015

How to make div in grid view be of 90% height of page

I want to create grid view, where header contains 10% height of the page and body 90%.

I have tried to adjust this, but body part does not grow when element section on right hand scales.

I want to add elements in right panel in responsive manner.

Is there any good way to organize this?

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background-color:lavender;">
            <div class="header">Header Height should be 10% of the page</div>
        </div>  
    </div>

    <div class="row" >
        <div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
        </div>
        <div class="col-xs-4" style="background-color:lavender;">
            <!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
            <div class="row" >
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item1</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item2</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item3</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item4</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item5</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item6</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item7</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item8</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item9</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item10</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item11</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item12</div>
                </div>
         </div>
     </div>
</div>

</body>

via Chebli Mohamed

android

mercredi 5 août 2015

How to make div in grid view be of 90% height of page

Aucun commentaire:

Enregistrer un commentaire