handles
handles

Reputation: 7853

Resizing and then scrolling browser window and position absolute

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.

Upvotes: 1

Views: 3442

Answers (3)

Uttam Nath
Uttam Nath

Reputation: 672

body{
overflow:hidden;
display: flex;
}
#sideBar {
    left: 5px;
    overflow: auto;
    position: absolute;
    right: 5px;
    top: 0px;
    width: 235px;
    height: 100%;
    border: 1px solid black;
}

#mainContent
{
    position: absolute;
    right: 5px;
    top: 0px;
    bottom: 0px;
    left: 250px;
    overflow: auto;
    padding: 10px;
    border: 1px solid black;
}
<!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>
</html>

Upvotes: 0

tnt-rox
tnt-rox

Reputation: 5548

use the following css

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

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

Upvotes: 0

Jason
Jason

Reputation: 11615

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

Upvotes: 2

Related Questions