0

como posso deixar minha coluna com 100% height?

exemplo:

EXEMPLO

onde está escrito Teste, é a coluna q tem que ficar 100% height,

DETALHE

em algumas telas, eu irei adicionar conteúdos usando jQuery, preciso também que não deixe esse conteúdo que não está visível ainda fora do height

CODIGO

    <div class="col-xs-12 col-md-12" id="menu">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li><a href="index.html"><span class="glyphicon glyphicon-envelope"></span> Item</a></li>
                  <li><a href="index.html"><span class="glyphicon glyphicon-shopping-cart"></span> Item</a></li>
                  <li><a href="index.html"><span class="glyphicon glyphicon-list"></span> Item</a></li>
                  <li><a href="index.html"><span class="glyphicon glyphicon-signal"></span> Item</a></li>
                  <li><a href="index.html"><span class="glyphicon glyphicon-cog"></span> Item</a></li>
                </ul>
<ul class="nav navbar-nav navbar-right">
    <li><a href="#">Log off</a></li>
</ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<div class="col-xs-12 col-md-2" id="ulMenuLateral">
    <ul>
        <li><a href="index.html"><span class="glyphicon glyphicon-envelope"></span> Item</a></li>
        <li><a href="index.html"><span class="glyphicon glyphicon-shopping-cart"></span> Item</a></li>
        <li><a href="index.html"><span class="glyphicon glyphicon-list"></span> Item</a></li>
        <li><a href="index.html"><span class="glyphicon glyphicon-signal"></span> Item</a></li>
        <li><a href="index.html"><span class="glyphicon glyphicon-cog"></span> Item</a></li>
    </ul>
</div>


<div class="col-xs-12 col-md-10 content">
  <div class="col-xs-12 col-md-12 semPadding paddingCimaBaixo">
    <h1>
      Teste
    </h1>
  </div>

6
  • Seria interessante você postar o código do "exemplo" aqui também, assim, o link fica sendo apenas referencia para o código descrito.
    – user28595
    Commented 3/12/2015 às 16:34
  • Ok @DiegoFelipe
    – Furlan
    Commented 3/12/2015 às 16:36
  • uma alternativa seria pegar o tamanho da tela via jquery Commented 3/12/2015 às 16:44
  • 1
    Você precisa de 100% da tela ou do espaço que está faltando para chegar até o rodapé? Commented 3/12/2015 às 16:45
  • Queres que esse h1 divida a página ?
    – Edilson
    Commented 3/12/2015 às 16:53

2 Respostas 2

4

Vamos começar do mais fácil e vamos ao mais complicado. Para deixar o conteudo visivel, você precisa adicionar o overflow: scroll na coluna.

Com relação ao height: 100% que é a parte mais complicada disso. Você precisa declarar um tamanho de referencia que seja pai do nó. Isso é um problema antigo do CSS em que você não pode alterar o tamanho, sem ter um de referencia. Algo do tipo body: 600px.

Com CSS3 foi acrescentado uma alternativa chamada view height e view width. Com ela você consegue os 100%, em qualquer dispositivo, mas tem alguns problemas de compatibilidade. Os suportes só existe para IE9+ e não existe suporte para Opera mini. Você pode consultar a lista aqui.

E segue o exemplo da classe.

.content {
    height: 100vh;
    overflow: scroll;
}
1

Além da alternativa citada acima pelo @flpms é possível descobrir o tamanho da tela, e por meio do jquery implementar em seu css esta altura.

var altura = $(window).height();
$(".coluna").css("height",altura);

Assim passando a altura da sua tela para a coluna, assim tendo sempre 100%.

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 .