css - 在 div 中滚动移动内容

Question

刚开始使用 div，遇到了一些问题，希望您能帮助解决。

CSS

#wrapperBox {
    width: 100%;
    border-style: solid;
    border-width: 1px 0;
    border-color: #f3a538;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 5px 5px 5px #cccccc;
}

.rullerContent {
    width: 100%;
    height: 465px;
    border: 0px;
    overflow: auto;
}

HTML

<div id="wrapperBox">
  <div class="rullerContent">
    Here is a lot of text, so vertical scroll will appear.....
  </div>
</div>

我的问题:

1) 滚动插入页面的其他内容。我能否以某种方式为滚动条分配空间或隐藏它(甚至更好)，但仍具有滚动功能？

2) 我能否将高度定义为“到浏览器窗口的底部”，这样它看起来就像文本不断出现，而不是在整个页面上垂直滚动？

希望你能提供帮助，我已经很具体了。

问候

Answer 1

您可以通过在 .rullerContent 的右侧添加一些填充来“隐藏”滚动条并仍然具有默认行为(使用鼠标滚轮)。

您可以使用 height:100% 使您的元素占据文档屏幕的 100%。

我已将 .wrapperBox 的 box-sizing 更改为 border-box，以便边框宽度包含在高度中:

#wrapperBox {
    width: 100%;
    height:100%;
    border-style: solid;
    border-width: 1px 0;
    border-color: #f3a538;
    background-color: #ffffff;
    overflow: hidden;
    box-sizing:border-box;
}
.rullerContent {
    width: 100%;
    height:100%;
    border: 0px;
    overflow: auto;
    padding-right:20px;
}

JSFiddle

当然，您将无法再单击和/或拖动滚动条区域。因为您看不到它。