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

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

html css

Html 为什么在这种情况下我的固定div会被切断？,html,css,Html,Css,在以下JSFIDLE中：我希望我右边的列表（蓝色）在任何时候都可见，所以我给了它一个固定的位置，当用户向下滚动时，它会跟随浏览器的垂直滚动条。此列表中的内容是动态添加的，可以扩展为一个大列表。当页面上没有足够的内容，列表中的项目太多时，它就会被切断。如何确保列表中的项目始终可见？我已经玩了一段时间的CSS，似乎无法解决这个问题我的HTML结构： <body> <div> <div id="mainContent">

在以下JSFIDLE中：

我希望我右边的列表（蓝色）在任何时候都可见，所以我给了它一个固定的位置，当用户向下滚动时，它会跟随浏览器的垂直滚动条。此列表中的内容是动态添加的，可以扩展为一个大列表。当页面上没有足够的内容，列表中的项目太多时，它就会被切断。如何确保列表中的项目始终可见？我已经玩了一段时间的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>

我错过了什么？谢谢

您可以添加

overflow-y: auto;
height: 100%;

不确定这是否是最好的用户体验，但它确实允许用户在固定位置的情况下查看该框中的所有内容。

您好，我理解您的问题，但我有点赶时间，所以我只给您一个指向另一个类似问题的链接，希望这能有所帮助

其他方式我明天会回来；）

编辑：哦，我看到尼克也给出了类似的答案

b球童

位置：固定和<代码>浮动：左侧在一起没有意义。如果内容比视口长，您希望内容如何自动适应？你可能需要JavaScript来实现这一点。Nick有最好的CSS选项，但正如j08691所说，你不能只是神奇地在一个小空间中容纳大量的文本！
overflow-y: auto;
height: 100%;