Question

使用下面的演示html / css我在窗口恢复时遇到了一个奇怪的问题。

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

enter image description here

调整窗口大小，以便#mainContent显示滚动条。
现在使用正文的滚动条（右手一个 - 而不是#mainContent的滚动条！）并滚动到页面底部。
我希望#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>

感谢任何帮助。

Answer 1

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

但据我所知，您希望将#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;
}

Answer 2

使用以下css

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

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

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

2 个答案: