How to make a page that occupies the entire screen height?

Question

I want that independt of viewport, the page occupies the entire screen height, without scrool bar.

The page has to take 100% of the screen is a cell phone, and tablet or desktop. Withou scrool bar.

Undestand?

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>

CSS:

*{
  margin: 0;
    padding: 0;
}

body {

    height: 100%;
}

`html, body { height: 100%; width: 100%; max-width: 100%; max-height: 100%; overflow: hidden; }` — giorgio, Dec 03 '15 at 11:05
Possible duplicate of [how to make a full screen div, and prevent size to be changed by content?](http://stackoverflow.com/questions/3276226/how-to-make-a-full-screen-div-and-prevent-size-to-be-changed-by-content) — giorgio, Dec 03 '15 at 11:10
Thank you very much! Complementing your comment: http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php — Zkk, Dec 03 '15 at 12:11

score 1 · Answer 1 · answered Dec 03 '15 at 11:14

Use the following CSS:

html, body {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

This sets the width and height to 100%, and the max-width and max-width to 100% (to stop the width and height getting over 100%)

It then has overflow: hidden to remove the scroll bar (because the overflowing content is hidden)

How to make a page that occupies the entire screen height?

1 Answers1