How do I leave an element with page height all the time?

Asked

Viewed 318 times

2

I have the following problem: I need to let a div have the screen height the time. 

<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>

I just want to do what I do with the tag menulateral have the entire screen height.

I was trying to do it this way:

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

I don’t know if this is the best way for me to do it, because I would like it to work smoothly and on every device that could access this page. There is a better and more reliable solution?

jquery twitter-bootstrap

2 answers

3


There is no need to use Javascript if you do not intend to make use of this value while running your application. As I said, this menu will have the same size every time, so just the property height of 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>

But if you really want to use jQuery, in addition to setting the initial size (as you did in your code), you will also need to listen for the resize events in the window to update the element size: 

$(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

I will suggest you use a page template with side menu that the own bootstrap suggests, Simple sidebar

How are you doing, the menulateral is inside a row, which is not recommended, since the row is a horizontal split and your menu needs to be vertical.

The code is basically this:

<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>

Take a look at the link to template

The sidebar-wrapper within a wrapper will create a "space" for a 250px wide responsive menu. It would be nice if you gave a look at the html of template and in the documentation of bootstrap, you don’t need to use jQuery for this. Of course, you can do this with jQuery, but I think it becomes easier and more viable using CSS and as I said in start, it’s a suggestion.

  • I get it, so this sidebar-wrapper would already solve my case?

  • I changed the answer.

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.