Menu
I'm developing a little website and I'm facing some troubles.
What I want is to resize a "row" div with a particular height, in percentage. I've already searched on 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>
class "row-first" for now has no rules so it not take effect. I want that "row-first" div is 80% of the viewport's height, but the only way to resize it is by putting some content inside the div so that the div's height follows content height. 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 {
}
820
If you want to have a true 100% width element, simply put a w-100 class on your div without container . In your case, when you are using a container , switch it to a fluid one by replacing it with container-fluid , and adding a p-0 class as well.
The . container-fluid class provides a full width container, spanning the entire width of the viewport.
Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
The height of the div is relative to the height of the parent. Therefor, to make the height of .row 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 with the height and see for yourself!
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
