If this is in the wrong section, please move it. Thanks.
Situation:- I have a sidebar with height: 100%; set in the css
- I cannot specify a pixel value for the height
- The sidebar needs a vertical scrollbar for if the contents overflow its container
Solutions that FAILED:- CSS Overflow does not work. Firefox requires a pixel value be specified for the immediate parent container in order for overflow's scrolling to work.
- Iframes screw everything up as they cannot access Javascript files in the parent container. Since the entire thing is AJAXed (project requirement, not my idea), all Javascript files MUST be able to talk to each other.
I am willing to use Javascript libraries like jQuery if there is an alternative plugin/widget solution.
Hacks to get overflows or iFrames to work would be a last resort, though suggestions are still welcome. For example, I could obtain the parent container's pixel height in Javascript and do an arithmetic calculation to obtain the pixel height I need for the overflow. However, that would be messy as that height would need to be modified to account for margins, padding, and border sizes. Then there's how different browsers return different heights and factor in margins/padding/borders differently.
Help is appreciated. Thanks in advance.
None.
Don't use an iframe, just use a frame, are the contents from another page, or can you contain them in the same page?
None.
Do you have another container below the sidebar or something? I don't understand why it would overflow at all and not just be allowed to expand as needed. Are you trying to mock old iframe styles? They died for a reason.
None.
The page must be loaded within another webpage. Think of it like an embedded youtube video, except it's a web page. AJAX is used to write into the innerHTML of the container. Again, NOT my idea; it's the project requirement.
I have no control over the parent webpage. The width/height of the entire container will be specified in the parent webpage. Frames are therefore unusable. Since there is an unknown specified height, the data in the sidebar must not be allowed overflow. Hence my need for a scroll of some sorts.
Again, thanks for the help in advance.
None.
You could use Javascript to get the height of the page:
if(navigator.appName.indexOf("Netscape"))
{
PosY = innerHeight;
}
else
{
PosY = document.body.clientHeight;
}
And then use that pixel height for the iframe.
None.
I do believe the parent window would also control the scrollbars in the event of an overflow or an iframe. I think you are looking at this all wrong but I honestly still don't know what you are trying to do or the project just seems silly and beyond reason.
# Iframes screw everything up as they cannot access Javascript files in the parent container.
The javascript files can just be loaded again. Since it is a separate webpage, treat it like one. You can accomplish any kind of talking between the two frames after that.
And that would easily accomplish the scrollbar problem, because the parent window will see it as overflowing.
Since you have no control over the parent window, I don't see why you would need it's javascript at all. I also don't see how you have a choice between an iframe, frame, or container.
# CSS Overflow does not work. Firefox requires a pixel value be specified for the immediate parent container in order for overflow's scrolling to work.
Javascript. It wouldn't really be a hack, but the container would run something at load to get the containers height from the parent and then write itself a height with overflow. It shouldn't be messy at all, you would basically be matching a inner container height to the parent's container height and all should be well.
However, if it is only a simple container, the container would be a part of the parent anyways, so you should simply be able to access it.
Talking about ajax and containers in this regard seems very conflicting.
None.
