Scrolling when contents extend beyond bottom of window

Scrolling and height issues

[sicka]

I have a C#.NET control that renders a table. Inside one of the table cells, there is a div with a list of links. It seems to me that when this div extends beyond the bottom of the page, a scrollbar should appear (overflow is set to 'auto'). But the only way I can get a scrollbar to show up is if I set a max-height, and the contents extend beyond the max-height.

This is fine if the user picks the right window size and never shrinks it, but obviously I want the users to be able to resize the window as they please and still be able to scroll through the contents.

I've tried setting max-height to 100%, but this does nothing. The question arises, 100% of what? I would hope the answer would be "100% of the window size" but this does not appear to be the case.

Does anyone know why this is happening and how to get around it?

Thanks,
Sam

[Drag_Racer]

are you using css to 'position' the table? Does this happen in browsers other than IE?

[sicka]

The table is using relative positioning. And this happens in all browsers. After playing with it some more, I realize that I can get block level elements outside the table to scroll, allowing me to view the whole list of links, but the scroll bar really needs to be inside the box that is formed by the control. Here is an example of what's happening.

<div id=”leftrail”> //this is the whole left rail, which scrolls
<div id=”relatedlinkscontainer”> //this is the div surrounding the header box, which scrolls
<span id=”relatedlinkscontainerheaderbox”> //beginning of the header box, which doesn’t scroll
<table> //table inside header box where content is rendered, which doesn’t scroll
…

[Drag_Racer]

need more code to see what happening, I'm not seeing the whole picture from what you posted... (I'm a bit slow sometimes)

btw, does the code validate?

[sicka]

Ha, ok you asked for it! As I said before, I've tried messing with the height and overflow attributes of all these block level elements, but the only elements that I can get to scroll are those before the <span> tag.

Important styles for documentleftregion:

bottom:0;
height:436px;
left:0;
overflow-x:hidden;
overflow-y:hidden;
position:absolute;
top:123px;
width:252px;

Other css classes:

.RelatedLinksContainerControl { padding-left: 5px; padding-right: 5px; padding-top: 20px; width: 98%; }
.RelatedLinksContainerContent { overflow:auto; }
.RelatedLinksList {vertical-align:top; line-height:1.4em;}
.RelatedLinksSubTitle {font-size:0.75em; font-weight:bold;}
.RelatedLinksPaddedSubTitle {font-size:0.75em; font-weight:bold; padding-top:15px;}
.RelatedLinksShowMoreIndicator {font-size:0.75em; font-weight:bold; color:#777777;}

.RelatedLinksContainer .MajorHeaderBoxContent {background-color: transparent;}
.RelatedLinksContainer .MajorHeaderBox { border: #9A9A9A 1px solid; border-right:#9A9A9A 1px solid; border-left:#9A9A9A 1px solid; }

Html:

<div id="ctl06_mContent_ctl00_documentleftregion" class="Layout_Region_ctl06_mContent_ctl00_documentleftregion Layout_Region LeftPanel" style="overflow: hidden; bottom: 0px; position: absolute; top: 123px; left: 0px; width: 252px; height: 436px;">
<div id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerControl" class="RelatedLinksContainerControl">
<span id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerHeaderBox" class="RelatedLinksContainer" style="">
<table class="MajorHeaderBox" cellspacing="0" cellpadding="3" border="0" width="100%">
<tbody>
<tr class="MajorHeaderBoxTitleBar" style="background-image: url(http://my.business.westlaw.com/images/grey_grad_bot37.jpg);">
<td class="FeatureNavigation Layout_HeaderBoxTitle" nowrap="nowrap" align="left">
</td>
<td align="right">
</td>
</tr>
<tr id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerHeaderBoxContent" class="MajorHeaderBoxContent">
<td colspan="2">
<div class="MarginAllSmall">
<input id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerHeaderBox_mHiddenField" type="hidden" value="Expand" name="ctl06$mContent$ctl00$RelatedLinksContainer$mRelatedLinksContainerHeaderBox$mHiddenField"/>
<div id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerHeaderBox_mRelatedLinksContainer" class="RelatedLinksContainerContent" style="max-height: 600px;">
<div id="ctl06_mContent_ctl00_RelatedLinksContainer_mRelatedLinksContainerHeaderBox_mNonCollapsibleArea">
<div class="RelatedLinksSubTitle">
<span>Browse Documents</span>
</div>
<div>
<a class="SecuritiesTaxonomyResultList" href="http://my.business.westlaw.com/toc/default.wl?action=JumpTree&rs=GTNS10.03&ifm=NotSet&n=1&fn=_top&sv=Split&rlti=1&pbc=4BF3FCBE&abbr=WLB-GAIMSRUK&rlt=CLID_QRYRLT7727653314111&cfid=1&db=WLB-GAIMSRUK&vr=2.0&rp=%2ftoc%2fdefault.wl&mt=WLBSecuritiesUK" onclick="if(pagePreviouslyClicked()){return false;};">Browse Table of Contents</a>