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

【问题标题】：Why does my fixed div get cut off in this situation?为什么我的固定 div 在这种情况下会被切断？
【发布时间】：2014-07-04 09:38:30
【问题描述】：

在以下 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;
}

我错过了什么？谢谢！

【问题讨论】：

position: fixed; 和 float: left; 一起没有意义。如果内容比视口长，您希望内容如何自动适应？你可能需要 JavaScript。
Nick down there 有最好的 CSS 选项，但就像 j08691 说的那样，你不能神奇地将大量文本放在一个小空间里！

标签： html css

【解决方案1】：

你可以添加

overflow-y: auto;
height: 100%;

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

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

【讨论】：

【解决方案2】：

您好，我了解您的问题，但我有点着急，所以我只是给您一个指向另一个类似问题的链接，希望对您有所帮助。

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

不然我明天再来;)

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

球童

【讨论】：