Resizing and then scrolling browser window and position absolute

1
votes

Using the demo html/css below I'm getting a strange problem with the window reszing.

Edit: Here's a screen shot:

enter image description here

  1. Resize the window enough so that #mainContent displays scroll bars.

  2. Now use the body's scroll bar (the outter right hand one - not #mainContent's scroll bar!) and scroll to the bottom of the page.

  3. I was hoping that #mainContent would resize and fill the page as we scroll down, but it doesn't, it stays the same size, so I end up with a blank area that is not filled.

Is there a css only rememedy to this or do I need some javascript?

I've seen this solution on a list a part this solution on A List Apart. However it hides the body's scroll bar so doesn't really help me.

CSS:

#sideBar {
    left: 5px;
    overflow: auto;
    position: absolute;
    right: 5px;
    top: 0px;
    width: 235px;
    border: 1px solid black;
    height: 5000px; /*silly value just to ensure that scroll bar is visible*/
}

#mainContent
{
    position: absolute;
    right: 5px;
    top: 0px;
    bottom: 0px;
    left: 250px;
    overflow: auto;
    padding: 10px;
    border: 1px solid black;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="test2.css"/>
</head>
<body>
    <div id="sideBar">
        <ul><li>Nav</li>
        </ul>
    </div>
    <div id="mainContent">
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    </div>
</body>

Thanks indvance for anyhelp.

2
csshtml
Im not sure what you are trying to achieve; but wrt your "silly value" try overflow-y: scroll; – tnt-rox
Thanks for responding - I've added a screen shot to my orginal post to help explain my problem, does this help? – bplus
Just tried adding height: 100% to #mainContent - this didn't work (thanks for the suggestion though). – bplus
Hello @bolus, why did you set #mainContent to position;absolute ? – Nikkkshit

2 Answers

2
votes

I'm not sure I fully understand exactly the functionality that you want.

But from what I understand you want to change #maincontent to position:fixed.

http://jsfiddle.net/MY7fY/

#sideBar {
    left: 5px;
    overflow: auto;
    position: absolute;
    right: 5px;
    top: 0px;
    width: 235px;
    border: 1px solid black;
    height: 5000px; /*silly value just to ensure that scroll bar is visible*/
}

#mainContent
{
    position: fixed;
    right: 5px;
    top: 0px;
    bottom: 0px;
    left: 250px;
    overflow: auto;
    padding: 10px;
    border: 1px solid black;
}
0
votes

use the following css

body {
      height: 100%;
      padding: 0;
      margin: 0;
     }

#mainContent {
    height:100%;
    ...
    }