Css 调整大小,然后滚动浏览器窗口和绝对位置
使用下面的演示html/css,我在重新调整窗口大小时遇到了一个奇怪的问题 编辑:这里是一个屏幕截图:Css 调整大小,然后滚动浏览器窗口和绝对位置,css,html,Css,Html,使用下面的演示html/css,我在重新调整窗口大小时遇到了一个奇怪的问题 编辑:这里是一个屏幕截图: 调整窗口大小,使#mainContent显示滚动条 现在使用正文的滚动条(最右边的滚动条,而不是mainContent的滚动条!)并滚动到页面底部 我希望#mainContent可以在向下滚动时调整页面大小并填充页面,但事实并非如此,页面大小保持不变,因此我最终得到了一个未填充的空白区域 是否有一个css的唯一记忆,或者我需要一些javascript 我在一份清单上看到了这个解决方案。但是,
- 导航
感谢indvance提供的帮助。我不确定自己是否完全理解您想要的功能 但据我所知,您希望将#main content改为position:fixed 使用以下css
body {
height: 100%;
padding: 0;
margin: 0;
}
#mainContent {
height:100%;
...
}
我不知道你想达到什么目的;但是写下你的“愚蠢的价值”试试overflow-y:scroll;感谢您的回复-我已经在我的原始帖子中添加了一个屏幕截图来帮助解释我的问题,这有帮助吗?只是尝试将高度:100%添加到#main content-这不起作用(不过感谢您的建议).感谢您的回复-我尝试了您建议的固定值,但它并不完全符合我的目的-因此我在我的原始帖子中添加了一个屏幕截图,以尝试说明发生了什么。希望这能有所帮助。 <!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>
#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;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
#mainContent {
height:100%;
...
}