How to leave an element with page height all the time?

Question

How to leave an element with page height all the time?

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have the following problem: I need to let a div have the height of the screen 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 the div with the identifier menulateral has all the time the height of the screen.

I was trying to do it this way:

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

I do not know if this is the best way for me to do it, because I would like it to work without problems and on all the devices that could access this page. Is there a better, more reliable solution?

jquery twitter-bootstrap

asked by anonymous 12.11.2015 / 13:55

2 answers

2

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

As you're doing, menulateral is within row , which is not recommended since row is a horizontal division and its menu must 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 template link

The sidebar-wrapper within a wrapper will create a "space" for a responsive menu with 250px wide. It would be nice if you give a look at the html template and in the documentation bootstrap , you do not need to use jQuery for this. Sure, you can do this with jQuery, but I find it easier and more viable using CSS and as I said in start, it's a suggestion.

12.11.2015 / 13:57

PHP condition for not displaying image when it does not exist Check if user changed POST request

score 3 · Accepted Answer

You do not need to use Javascript if you do not intend to use this value during the execution of your application. As you said, this menu will always have the same size, so just the height property of the 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 also need to listen for window resizing events to refresh 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>