Reputation: 7853
Using the demo html/css below I'm getting a strange problem with the window reszing.
Edit: Here's a screen shot:
Resize the window enough so that #mainContent displays scroll bars.
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.
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
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
Reputation: 5548
use the following css
body {
height: 100%;
padding: 0;
margin: 0;
}
#mainContent {
height:100%;
...
}
Upvotes: 0
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.
#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