Geek Answers Handbook

Percentage of boot line height

I am developing a small website and I have to face some problems.

I want to resize a div in a row with a certain height in percent. I was already looking for SO, but nothing was good for me. Here is my code:

<body> <nav class="navbar navbar-inverse navbar-static-top"> ... </nav> <!-- END NAVBAR --> <div class="container-fluid"> <div class="row row-first"> <img class="img img-responsive" src="public/img/bg.jpg" /> </div> </div>

the row-first class does not currently have rules, so it does not take effect. I want the "div-first" div to be 80% of the height of the viewport, but the only way to resize it is to place the content inside the div so that the height of the div matches the height of the content. my CSS:

 html { height: 100%; } body { height: 100%; } body { font-family: 'Muli', sans-serif; } .container-fluid { max-height: 100%; padding-left: 0px; padding-right: 0px; } .row { margin-left: 0px; margin-right: 0px; height:80%; } .row-first { }
+5
source share
1 answer

The height of the div depends on the height of the parent. Therefore, to make the .row height 80%, I first set the height of the parent. Here's the css:

 .container-fluid { height: 100%; padding-left: 0px; padding-right: 0px; } .row-first { height:80%; overflow: hidden; }

And the fiddle: http://jsfiddle.net/bmwoLkdr/

Feel free to play from a height and see for yourself!

+6
source

More articles:


All Articles