gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:37:28 25 4
gpt4 key购买 nike

使用下面的演示 html/css,我遇到了一个奇怪的窗口调整问题。

编辑:这是一个屏幕截图:

enter image description here

  1. 适当调整窗口大小,以便 #mainContent 显示滚动条。

  2. 现在使用正文的滚动条(右手边的那个——不是#mainContent 的滚动条!)并滚动到页面底部。

  3. 我希望 #mainContent 会在我们向下滚动时调整大小并填充页面,但事实并非如此,它保持相同的大小,所以我最终得到一个未填充的空白区域。

是否只有 css 可以解决这个问题,还是我需要一些 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>

感谢您的帮助。

最佳答案

我不确定我是否完全理解您想要的功能。

但据我了解,您想将#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;
}

关于css - 调整大小然后滚动浏览器窗口和绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9178239/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com