向 <div> 元素添加滚动条

Question

我想在 secundary div 中添加滚动条，我添加了 width 和 height:

#primary {
  width: 100%;
  height: 15%;
}

#secundary {
  width: 100%;
  height: 85%;
  overflow: scroll;
}

<div id="primary">
  <!-- content -->
</div>
<div id="secundary">
  <!-- content -->
</div>

我尝试使用 overflow: scroll 属性，但我在 secundary div.

中看不到任何滚动条

Answer 1

#primary {
  width: 100%;
  height: 15%;
}

#secundary {
  width: 100%;
  height: 100px;
  overflow: scroll;
}

<div id="primary">
  <!-- content -->
</div>
<div id="secundary">
  text text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text
</div>

需要"overflow"个内容： https://developer.mozilla.org/en/docs/Web/CSS/overflow

Answer 2

试试这个代码：

https://output.jsbin.com/sugelod

#primary {
  width: 100%;
  height: 15%;
  overflow: scroll;
}

#secundary {
  width: 100%;
  height: 85%;
  overflow: scroll;
}

Answer 3

height 的百分比值仅在 parent 元素具有固定的 height 值时才有效。当前，您的 #secundary 元素是 body 的 child，并且 body 的高度设置为 auto- 这是默认值 - 而且使 body 的高度根据其 children.

的高度而变化

您可以为 #secundary 或 body.

定义一个固定的高度值

一个例子：JSFiddle

向 <div> 元素添加滚动条

Add a scrollbar to a <div> element

html

css

scroll

overflow