Que fazer com que a página ocupe 100% do viewport, que a mesma não possua barra de rolage. Seja num celular pequeno, médio, grande, tablet e ou num desktop.
A altura (height) tem que estar fixo, ocupando toda a tela. Sem barra de rolagem. Entendem o que quero fazer?
Coloquei no css o height como 100% e também algumas variações mas sem sucesso.
O layout terá no topo apenas um navbar e um título bem grande, o centro uma imagem e o rodapé.
Como faço isso?
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>