Enabling scrollbars in div

Question

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

score 0 · Answer 1 · edited Jan 05 '16 at 11:38

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

edited Jan 05 '16 at 11:38

iCollect.it Ltd

92,391
25
181
202

answered Jan 05 '16 at 11:31

Ajey

7,924
12
62
86

This will not fill the screen (which is presumably the aim) – iCollect.it Ltd Jan 05 '16 at 11:31
1

Yes, I want div to fill the screen. – Cyanide Jan 05 '16 at 11:33
It would be ok, but this destroys the boostrap settings. After setting position:absolute div sticks to the left corner and it should be vertically centered. – Cyanide Jan 05 '16 at 11:38
@Cyanide That should be fixable by setting 'left' and giving margin as auto. Can you create a fiddle and post it here so that I can help you out better! – Ajey Jan 05 '16 at 11:40
I don't know why, but in fiddle it is working fine :( https://jsfiddle.net/2m5oyhw5/ – Cyanide Jan 05 '16 at 12:05

score 0 · Answer 2 · edited Jan 05 '16 at 11:38

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

edited Jan 05 '16 at 11:38

Ajey

7,924
12
62
86

answered Jan 05 '16 at 11:35

iCollect.it Ltd

92,391
25
181
202

Whats the second option? – Ajey Jan 05 '16 at 11:36
@Aley: 100% height, negative margins and padding (which I personally hate) – iCollect.it Ltd Jan 05 '16 at 11:37
It would be ok, but this destroys the boostrap settings. After setting position:absolute div sticks to the left corner and it should be horizontally centered. – Cyanide Jan 05 '16 at 11:41
@Cyanide: I think you mean horizontally centered :) It depends on where you nest the containers. I use fixed header, footer and scrolling containers in bootstrap. Perhaps you can provide a more complete JSFiddle so I can demonstrate? – iCollect.it Ltd Jan 05 '16 at 11:44
I don't know why, but in Fiddle it is working fine :( – Cyanide Jan 05 '16 at 11:56

score 0 · Answer 3 · answered Jan 05 '16 at 12:34

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.

score 0 · Answer 4 · edited May 23 '17 at 11:52

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.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 05 '16 at 13:04

iGian

11,023
3
21
36

Enabling scrollbars in div

4 Answers4