所有内容在 div 高度 100% 时不可见

Question

我正在通过 Jquery 从 php 文件（15 项）加载我的 div 内容。 一旦 div 的高度为 500px，所有内容都在那里，但是一旦我希望它是 100%，一些数据就不存在了。 当高度为 500 像素时，它会在滚动时加载更多内容，但一旦达到 100% 就不会滚动。 请问我该如何解决？ 谢谢你。

#list {
   position: fixed;
   top: 50px;
   left:0%;
   width: 350px;
   padding-left: 80px;
   height: 1000%;
   border: 1px #d3d3d3 solid;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius: 5px;
   background-color: #FFFFFF;
   box-shadow: 10px 10px -5px #888888;
   -moz-box-shadow:10px 10px -5px #888888;
   -webkit-box-shadow:10px 10px -5px #888888;
   overflow-y: scroll;
}

Answer 1

我相信您的问题是由以下 CSS 引起的（如您的问题所述，我将 CSS 中的height:1000%更改为height:100% ）：

position: fixed;
top: 50px;
height: 100%;

• position: fixed告诉浏览器将该元素保持在同一位置，无论浏览器窗口滚动了多少。
• top: 50px告诉浏览器将元素top: 50px在距浏览器窗口顶部 50 像素的位置。
• height: 100%告诉浏览器使元素的高度与浏览器窗口的高度相同（无论top位置如何）。

因为position:fixed意味着当页面滚动时元素不会移动，你总是会在元素底部有 50 个像素，这些像素总是会被隐藏，因为元素位置是固定的并且不会移动滚动时更改。

如果您需要元素始终距离屏幕顶部 50 像素，距离屏幕底部 0 像素（无论滚动），请不要指定height ，而是执行以下操作：

position: fixed;
top: 50px;
bottom: 0px;