How to leave a height-height fixed on the page?

Question

What to make the page occupy 100% of the viewport, that it does not have scrollbar. Whether on a small, medium, large phone, tablet and desktop.

The height (height) has to be fixed, occupying the whole screen. No scroll bar. You know what I want to do?

I put in css the height as 100% and also some variations but without success.

The layout will have at the top only a navbar and a very large title, the center an image and the footer.

How do I do that?

CSS: * {

    margin: 0;
    padding: 0;
}

body {

    height: 100%;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top">        <!-- "navbar-fixed-top" barra fixa no topo -->
    <div class="container-fluid">
        <div class="navbar-header">  <!-- MENU RESPONSIVO -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra">  
                <!--- Barra responsiva -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#" class="navbar-brand"> Menu </a>

        </div>


            <div class="collapse navbar-collapse" id="barra"> <!-- exibição de conteúdo do menu em qualquer tamanho/resolução -->
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>               

                <form action="" class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Pesquisar"></input>
                    </div>

                    <button type="submit" class="btn btn-default"> Buscar </button>
                </form>
        </div>
    </div>
</nav>
<br>

<div class="container-fluid">
<div class="row">
<section>
    <img class="col-md-4" src="img/071.JPG">
</section>  
</div>
</div>

<footer> </footer>

Answer 1

CSS is an inheritance language, that is, there is a hierarchy of properties where the characteristics of the "Father" will override those of the "Son", so every item you declare will inherit the "settings" of the parent element, so I need to define the properties of it.

 html{  /*Elemento PAI*/ 
  width: 100%;
  height: 100%;
 }
 body{ /*Elemento FILHO*/
  width: 100%;
  height: 100%;
 }      

#principal{  /*DIV - Neste exemplo, ela é o "NETO". */
  width: 100%;
  height: 100%;  
 }  

Follow a Snippet to better exclaim the explanation.

	html, body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	#principal{
		width: 100%;
		height: 100%;
		background: black;
	}

h2{
  text-align: center;
  color: white;
}

<div id="principal">
<br><br>
  <h2>Div ocupando 100% do viewport</h2>

</div>

Answer 2

My approach would be as follows: involve the entire "page" in a div .container, with defined width and height.

div.container{
   position: relative;
   width: 100vw;
   height: 100vh;
}

The units vw and vh are respectively "viewport width" and "viewport height". Each unit corresponds to 1% of the size of the viewport, either horizontally (width) or vertically (height).

Within that div, it is easy to position the elements you want - like the nav or a centralized content -, using values and position: absolute.

Answer 3

You can make a <script> where you take the height of your viewport, and then move on to your css, for example:

var minhaAltura = $(window).height();
$('.ondeQuero').css("height",minhaAltura);

So it will always occupy 100% of your page.

Answer 4

From what I understand, the container-Fluid should occupy every screen at the height of the device.

Therefore:

.container-fluid {
   height: 100vh;
}

It resizes the container as far as space is. I advise for a min-height on it not to break into smaller screens at the time.