Twitter Bootstrap Question posted in

Twitter bootstrap – Enabling scrollbars in div

I have HTML document based on twitter Bootstrap, which is like:

<DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<div class="container" id="main"></div>
<footer class="footer"></footer>
</body>
</html>

I know that <nav> is 50px high and <footer> is 20px high.
I want my div to be 20px from the navbar and 20px from the footer. Also, I want scrollbars to appear only in div, not on the whole page, so I have a CSS stylesheet like this:

 body {
    padding-top: 70px;
    padding-bottom: 40px;
    overflow: hidden;
}
#main.container {;
    overflow: auto;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 20px;
  text-align: center;
}

The problem is, that to use overflow:auto I have to define div height and I need this div to fill the screen.
Can someone tell me how can i do that?

Thanks for help,
Cyanide

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I've solved this problem with jQuery:

    $(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    windowHeight = windowHeight - 110;
    $('#main.container').css('height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

    But thanks everybody for answers.


  2. 0

    Position the container absolute and give it ‘top’ and ‘bottom’ so that you do not need to use height!

    #main.container {
    overflow: auto;

  position: absolute;
  background:red;
  top: 40px;
  bottom: 20px;
}

    Something like this – DEMO

    Login or Signup to reply.
  3. 0

    One option is to use absolute positioning on the container.

    Something like:

    #main {
  position: absolute;
  width: 100%;
  height: auto;
  top: 70px;
  bottom: 40px;
  overflow-y: auto;
}
    Login or Signup to reply.
  4. 0

    As I can understand you do not want to define the height in order to fit any screen size.

    You could set the heigh, calculate the size of the screen with javascript
    then set the new heigh (screen – nav – footer), like

    document.getElementById("container").style.height = new_height;

    new_height must be a string.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search