Question

在以下JSFiddle中：http://jsfiddle.net/TVNnT/5/

我希望我的右侧列表（蓝色）始终可见，所以我给它一个固定的位置，以便当用户滚动时它跟随浏览器的垂直滚动条下。此列表中的内容是动态添加的，可以扩展到大型列表。当页面上没有足够的内容且列表中的项目太多时，它会被切断。如何确保列表中的项目始终可见？我已经玩了一段时间的CSS了，似乎无法解决这个问题。

我的HTML结构：

<body>
    <div>
       <div id="mainContent">
          main content
       </div>
    </div>
    <div id="list">
        <ol>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ol>
    </div>
</body>

我的CSS：

body {
    background: #1b242b;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 16px;
    overflow-y: scroll;
}
#mainContent {
    background-color: pink;
    position: relative;
    width: 300px;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-right: 10px;
    padding-left: 60px;
}
#list {
    background-color: lightblue;
    position: fixed;
    overflow: hidden;
    float: left;
    width: 150px;
    min-height: 15px;
    font-size: 15px;
    top: 20px;
    margin-left: 400px;
    padding-right: 20px;
}

我错过了什么？谢谢！

Answer 1

你可以添加

overflow-y: auto;
height: 100%;

http://jsfiddle.net/TVNnT/7/

不确定这是最好的用户体验，但它确实允许用户在保持其位置固定的同时查看该框中的所有内容。

Answer 2

嗨，我理解你的问题，但我有点匆忙，所以我只是给你一个链接到另一个类似的问题，希望这有帮助。

Have a fixed position div that needs to scroll if content overflows

另外我明天会回来;）

编辑：哦，我看到尼克发布了类似的答案。：）

BBallBoy

为什么我的固定div会在这种情况下被切断？

2 个答案: