2

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>
5
  • 2
    Se você quer que a altura ocupe sempre 100% da pagina em vários dispositivos, não será possível ela ser estática 3/12/2015 às 1:21
  • Que seja rsrsrs(creio que não me expressei bem). Como posso fazer isso?
    – GtGtGt
    3/12/2015 às 1:22
  • Luiz, você já possui algo para melhorar sua pergunta? Se sim poste o código junto.
    – Randrade
    3/12/2015 às 1:39
  • Randrade, atualizei a pergunta com o código.
    – GtGtGt
    3/12/2015 às 1:50
  • Cara, to com o mesmo problema e cheguei a conclusão que é impossível. Por mais que se use qualquer das soluções acima, se uma div tem um conteúdo que ultrapassa o tamanho da tela, esse conteúdo não se ajusta.
    – João
    24/05/2017 às 10:13

4 Respostas 4

4

O CSS é uma linguagem de herança, ou seja há uma hierarquia de propriedades onde as características do "Pai" irá sobrepor as do "Filho", logo todo item que você declarar herdará as "configurações" do elemento pai, sendo assim eu preciso definir as propriedades do mesmo.

 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%;  
 }  

Segue um Snippet para exclarecer melhor a explicação.

	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>

2

Minha abordagem seria a seguinte: envolver toda a “página” numa div .container, com largura e altura definidas.

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

As unidades vw e vh são, respectivamente, “viewport width” e “viewport height”. Cada unidade corresponde a 1% do tamanho da viewport, seja horizontalmente (width) ou verticalmente (height).

Dentro dessa div, fica fácil posicionar os elementos que você quiser - como o nav ou um conteúdo centralizado -, utilizando valores e position: absolute.

1

Você pode fazer um <script> onde pega a altura do seu viewport, e depois passar para o seu css, por exemplo:

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

Assim ele sempre ocupará 100% da sua página.

0

Pelo que entendi, a container-fluid deve ocupar toda tela na height do dispositivo.

Portanto:

.container-fluid {
   height: 100vh;
}

Ela redimensiona o container até onde estiver espaço. Aconselho por uma min-height nele para não quebrar em telas menores na altura.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .