2

Tenho o seguinte problema: Preciso deixar que uma div tenha o a altura da tela o tempo.

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="topo">...</div>
</div>

<div class="row">
   <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" id="menulateral"> ...</div>
   <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12" id="principal"> ... </div>
</div>

Quero apenas fazer com o que a div com o identificador menulateral tenha o tempo todo a altura da tela.

Estava tentando fazer do seguinte jeito:

var altura = $("body").height();
$("#menulateral").height(altura);

Não sei se esse é o melhor jeito para eu fazer, porque gostaria que isso funcionasse sem problemas e em todos os dispositivos que pudessem acessar essa página. Existe uma solução melhor e mais confiável?

2
  • Você está usando bootstrap no teu projeto? 12/11/2015 às 13:00
  • sim estou bootstrap 12/11/2015 às 13:01

2 Respostas 2

3

Não tem necessidade de utilizar Javascript se você não pretende fazer uso desse valor durante a execução da sua aplicação. Como bem disse, esse menu terá o mesmo tamanho sempre, então basta a propriedade height das CSS:

html,
body {
  height: 100%;
  margin: 0
}

aside {
  background-color: #2ecc71;
  height: 100%; /* 100% da altura do elemento pai (no caso, o 'body') */
  width: 200px
}
<aside></aside>

Mas se quiser mesmo usar jQuery, além de definir o tamanho inicial (como fez no seu código), também precisará ouvir pelos eventos de redimensionamento da janela para atualizar o tamanho do elemento:

$(function() {

  var aside = $('aside');

  // Defininindo a altura inicial.
  aside.height($('body').height());

  // Redefinindo a altura sempre que a janela for redimensionada.
  $(window).resize(function() {
    aside.height($('body').height());
  });

});
html,
body {
  height: 100%;
  margin: 0
}

aside {
  background-color: #333;
  width: 200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<aside>sopt</aside>

2

Vou te sugerir utilizar um modelo de página com menu lateral que o próprio bootstrap sugere, Simple sidebar

Como você está fazendo, o menulateral está dentro de uma row, o que não é recomendável, pois a row é uma divisão na horizontal e seu menu precisa ser vertical.

O código é basicamente esse:

<body>    
    <div id="wrapper">    
        <!-- Sidebar - No seu exemplo, esse seria o seu menu lateral -->
        <div id="sidebar-wrapper">

        </div>    
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <!-- Aqui vai o conteúdo da sua página -->
        </div>    
    </div> 
</body>

Da uma olhada no link do template

O sidebar-wrapper dentro de um wrapper irá criar um "espaço" para um menu responsivo com 250px de largura. Seria bacana você dar uma olhada no html do template e na documentação do bootstrap, você não precisa usar jQuery para isso. Claro, você pode fazer isso com jQuery, mas acho que fica mais fácil e viável utilizando CSS e como disse no começo, é uma sugestão.

2
  • entendi, então esse sidebar-wrapper já resolveria meu caso? 12/11/2015 às 13:31
  • Alterei a resposta. 12/11/2015 às 13:47

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 .