我可以在高度可变的 div 上使用“溢出：滚动”吗？答案

【问题标题】：Can I use `overflow: scroll` on a div with variable height?我可以在高度可变的 div 上使用“溢出：滚动”吗？
【发布时间】：2013-06-28 22:26:54
【问题描述】：

是否可以在高度设置为自动的 div 上使用overflow: scroll？

我有一个 div，里面有一个无序列表。列表中的项目数量是可变的，因此我无法使用固定高度。包含无序列表的 div 是需要滚动条的地方，这是我的代码：

#page {
    height: auto; /* default */
    overflow-y: scroll;
    overflow-x: hidden;
}

如上所述，无序列表包含在#page div 中。页面的高度由无序列表的值指定。有没有办法使溢出：滚动在具有可变高度的 div 上工作，或者我必须使用 JavaScript 来做到这一点？

谢谢

【问题讨论】：

只是出于好奇，您正在使用什么开发平台？
我正在使用 PhoneGap 为 iOS 和 Android 创建应用程序。如果您不熟悉 PhoneGap，它允许您使用 html、css 和 javascript 编译应用程序。好东西:)

标签： javascript css

【解决方案1】：

实现此设计的一种方法...

假设您有以下 HTML：

<div class="main">
    <div class="inner">
        <ul>
            <li>Some list items...</li>
            ...
        </ul>
    </div>
</div>

.main 块适合页面，例如，通过绝对定位：

.main {
    border: 2px dashed blue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.inner 块包含可能导致滚动的导航列表：

.inner {
    border: 2px dotted red;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    overflow-y: scroll;
}

在本例中，我将.inner 块的高度限制为适合.main，并设置overflow-y: scroll，它会创建一个包含在边缘内的滚动条容器块。

您可能需要根据您的移动平台对此进行调整，但该概念仍应适用。

演示小提琴：http://jsfiddle.net/audetwebdesign/ac4xT/

【讨论】：

非常感谢。这个解决方案很完美:)

【解决方案2】：

简单地说，如果它具有可变高度（自动），它永远不会在 y 轴（垂直）上溢出，因为 div 总是会增长以适应其内容。

overflow: scroll 将强制它显示一个滚动条，但它总是被禁用，因为内容永远不会超出显示的窗格。

如果你想要垂直滚动，你必须定义一个高度，以 px、% 或 em 为单位。

如果您执行height: 100%，则 div 将填充页面的高度，并滚动超出窗口视口高度的内容。

如果您有标题区域，请尝试以下操作：

body {
  margin: 0;
}
#header {
  position: absolute;
  width: 100%;
  height: 40%;
  background-color: #ccc;
}
#body {
  position: absolute;
  top: 40%;
  width: 100%;
  height: 60%;
  overflow-y: auto;
  background-color: #eee;
}

<body>
  <div id="header">
    <p>Header</p>
  </div>
  <div id="body">
    <p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
    <p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
  </div>
</body>

对于固定高度的标题（根据 cmets），使用绝对定位和顶部和底部值将可滚动的 div 定位在其下方：

body {
  margin: 0;
}
#header {
  position: absolute;
  width: 100%;
  height: 60px;
  background-color: #ccc;
}
#body {
  position: absolute;
  top: 60px;
  bottom: 0px;
  width: 100%;
  overflow-y: auto;
  background-color: #eee;
}

<body>
  <div id="header">
    <p>Header</p>
  </div>
  <div id="body">
    <p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
    <p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p><p>Body</p>
  </div>
</body>

【讨论】：

您介意稍微扩展您的答案以帮助我的情况吗？你建议我做什么，因为 div 的高度是可变的？
我刚试了一下，结果是这样的：i.imgur.com/hn07vPH.png 它不会将整个页面向下滚动到列表底部
用更完整的解决方案更新了我的答案。您必须调整 % 值以使其看起来完全正确。
@jskidd3 我刚刚看到你的最新评论。 9年过去了，我终于回答了你的问题。
@StevenMoseley 谢谢你的笑声！

【解决方案3】：

为什么不在 div 上使用 max-height？

max-height 设置元素可以扩展的最大高度。我想你想要的是永远不会离开屏幕的 div。所以你可以设置一个最大高度然后溢出：auto;

【讨论】：

我不知道这个属性，请根据我的问题调整您的答案，以便我理解您的意思:) 谢谢