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

你可以隐藏＆＃39;滚动条仍然具有默认行为（使用鼠标滚轮），在.rullerContent右侧添加一些填充。

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

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

#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

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

滚动div会移动内容

1 个答案: