Scrollbar gets vanished when overflow:auto applied

Question

I have a footer and a content boxes. Footer is fixed, so that it is visible at any point of scroll. Content box is of 100% height, but its rise ends just before the footer begins (so that it won't cross a footer box and up with a failure.)

<div id="footer" style="border:4px solid black;"></div>
<div id="content" style="border:4px solid blue;"></div>

A problem comes here. #content has an overflow:auto parameter and it crushes the browser right-side scrollbar. An outcome gets even more horrible on my real example (Having a stretching background applied to while #content a picture covers a scrollbar making it invisible).

Here is a JSFiddle link: http://jsfiddle.net/TAVmF/7/

Please note that I wish a scrollbar was at its right place, not just appearing on #content part of the window.

Thank you all.

Edit:

Problems can be seen at this photo:

go to Jsfiddle and scroll to the right, then look at vertical scrolll. it's all messed up. — Davit, Oct 25 '12 at 11:58
http://jsfiddle.net/TAVmF/7/ content needs to be filled with text. it's filled in this version. — Davit, Oct 25 '12 at 11:58
i want scroll to be as normal, for the whole page. what is in
will be scrolled, and footer will be visible. — Davit, Oct 25 '12 at 12:00
Problems are at this photo: http://i48.tinypic.com/344zdw6.jpg — Davit, Oct 25 '12 at 12:18
I've updated my answer, and I think it does want you want now :) — Krzysztof Bujniewicz, Oct 26 '12 at 12:14

score 1 · Answer 1 · answered Oct 25 '12 at 12:16

1

html
{
    height:100%; 
    max-height:100%;  
    padding:0; 
    margin:0; 
}

change to

html
{ 
    padding:0; 
    margin:0; 
}

answered Oct 25 '12 at 12:16

Xswords

11
1

Then a new problem comes up. A content (blue bordered box) crossed a footer (black boredered box) in times of vertical scroll. – Davit Oct 25 '12 at 12:20
This is not a problem, it's supposed to work like that. You can't have a fixed element in the flow of the other elements, it ignores any other elements that are floating. For example it doesn't care about margins, because it's position is fixed and not relative to other elements. If you want it to be always at the bottom, it should be relative and not fixed. – Xswords Oct 25 '12 at 13:23
thanks, but i think i'll give up on solving this. it's not a solution, since a content border still dives into a footer border, and i am having a background on content that should not be hidden by footer. I'll find some other way. THANKS A LOT BTW. – Davit Oct 25 '12 at 13:32
in the url example i gave you, change footer to position:relative & delete #inner padding-bottom. Maybe you want that. – Xswords Oct 25 '12 at 13:46
in that case footer is not visible all time – Davit Oct 25 '12 at 14:02

score 0 · Answer 2 · answered Oct 25 '12 at 12:02

0

change #content{ height:98%; } try

answered Oct 25 '12 at 12:02

Toping

754
5
16

It's always bad idea to have non 100% height, I guess, reason is that real sizes of DIVs and non-100% percent size don't quite go well on different sizes of windows. Thanks for a comment anyways. – Davit Oct 25 '12 at 12:04
@tmpmember, dude the extra scrollbar is because of the border 4px, you need to reduce the height or add something like margin: -8px; on the content, its not working any other way. – Toping Oct 25 '12 at 12:07

Krzysztof Bujniewicz · Answer 3 · 2012-10-26T12:14:32.033

0

Maybe try:

#content
{
    display:block;
    top:0;
    width: 100%;
    left:0;
    bottom:170px;
    overflow:auto;
    position:absolute;
}

And remove the border from <div id="content">

Full example: http://jsfiddle.net/EQV6S/13/

EDIT: I think this is what you want: http://jsfiddle.net/EQV6S/15/ check it out, please :)

edited Oct 26 '12 at 12:14

answered Oct 25 '12 at 12:12

Krzysztof Bujniewicz

2,407
21
16

why top and bottom set on same css? – Toping Oct 25 '12 at 12:13
to make it stick to the top and bottom, with auto resize. Try it in the fiddle :) – Krzysztof Bujniewicz Oct 25 '12 at 12:14
It's not a solution unfortunately. Take a look at this photo. The two problems are here: http://i48.tinypic.com/344zdw6.jpg – Davit Oct 25 '12 at 12:17
It looks like http://tinypic.com/r/2z4llw8/6 If you want scrollbar to be on the very right of the screen, you need to remove the border. I will update the css. – Krzysztof Bujniewicz Oct 25 '12 at 12:22
A problem here is vivid. Scrollbar is INSIDE A BORDER. – Davit Oct 25 '12 at 12:36

score 0 · Answer 4 · edited May 23 '17 at 10:34

0

If your #content height is set to 100%, but you're pushing it up 170px from the bottom, the top 170px will always be off the top of the page. You'll need to either set a different height that is smaller than 100% - 170px, or you can try Method 3 of this answer here

edited May 23 '17 at 10:34

Community

1
1

answered Oct 26 '12 at 12:31

Scrimothy

2,536
14
23

score -1 · Answer 5 · answered Oct 25 '12 at 11:58

-1

Why there is left:250px for content div?? Try removing left:250px;

DEMO

answered Oct 25 '12 at 11:58

Sowmya

26,684
21
96
136

What I want is following: 1. having a normal (original scrollbar) 2. footer to be visible at all points of scroll 3. content border not crossing a footer border Maybe a problem occures because of overflow:auto. There has to be some other way around, I guess. but thanks anyways. – Davit Oct 25 '12 at 12:02

Scrollbar gets vanished when overflow:auto applied

5 Answers5