调整大小，然后滚动浏览器窗口和绝对位置

使用下面的演示html/css我遇到了一个奇怪的问题，窗口放大。调整大小，然后滚动浏览器窗口和绝对位置

编辑：这里有一个截屏：

enter image description here

调整窗口的大小足以使#mainContent显示滚动条。
现在使用body的滚动条（outter右边的一个 - 不是＃mainContent的滚动条！）并滚动到页面的底部。
我一直希望#mainContent在我们向下滚动时调整大小并填充页面，但它不会，它保持相同的大小，所以我最终得到一个未填充的空白区域。

有没有一个CSS只是rememedy这个或我需要一些JavaScript？

我已经看到这个解决方案列表中的一部分this solution on A List Apart。然而，它隐藏了身体的滚动条，所以并不能真正帮助我。

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>

感谢indvance为anyhelp。

来源

2012-02-07 bplus

林不知道你想达到什么目的;但是当你的“愚蠢的价值”尝试overflow-y：scroll; – 2012-02-07 15:33:35

感谢您的回复 - 我在我的原始文章中添加了一个屏幕截图来帮助解释我的问题，这有帮助吗？ – bplus 2012-02-08 09:27:19

试穿身高：100％; – 2012-02-08 09:58:06

我不确定我完全理解你想要的功能。

但是从我所了解的你想改变#maincontent到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; 
}

来源

2012-02-07 14:50:35 Jason

感谢您的回复 - 我尝试了您建议的固定值，它不会完全实现我正在尝试实现的目标 - 所以我为我的原始帖子添加了一个屏幕快照，以尝试说明发生了什么。希望这有助于。 – bplus 2012-02-08 09:29:26

使用下面的CSS

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

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

来源

2012-02-08 11:03:14

调整大小，然后滚动浏览器窗口和绝对位置

回答

相关问题