2
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>
If you want height to always occupy 100% of the page on multiple devices, it will not be possible for it to be static
– Lucas Fontes Gaspareto
Let it be rsrsrs (I don’t think I expressed myself well). How can I do this?
– GtGtGt
Luiz, do you already have something to improve your question? If yes post the code together.
– Randrade
Randrade, I updated the question with the code.
– GtGtGt
Man, I’m having the same problem and I’ve come to the conclusion that it’s impossible. No matter how much one uses any of the above solutions, if a div has content that exceeds the screen size, this content does not fit.
– João