2

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

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

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

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

谢谢

4

3 回答 3

3

一种接近这种设计的方法......

假设您有以下 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和 set overflow-y: scroll，这将创建一个包含在容器块边缘内的滚动条。

您可能必须将其适应您的移动平台，但该概念仍应适用。

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

于 2013-06-28T22:34:46.713 回答
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>

对于固定高度的标题（根据评论），使用绝对定位和顶部和底部值将可滚动的 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>

于 2013-06-28T22:28:16.863 回答
1

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

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

于 2013-06-28T22:31:16.890 回答