Question

我有一些帮助文本，我希望用户始终可以看到，即使他们已滚动到表单的底部。

我目前的风格如下：

/********** help text ********************/
.fixed-box {
    position:fixed;
    top:100px;
width: 100%;
   overflow:auto;
}

它真棒！当我向下滚动它留在我身边！但是当页面可以处理的文本更多时，它会在底部被截断。是否有任何方法可以确保帮助文本始终位于顶部，同时仍允许用户向下滚动以查看其余部分？

http://jsfiddle.net/uWY5S/

在上面的示例中，当我滚动时，文本总是位于页面顶部，这太棒了！但如果主页内容不够大，用户就永远无法阅读最后一个内容：（

Answer 1

.fixed-box {
    position:fixed;
    top:5px;
    width: 100px;
    overflow:auto;
    height: 100%;
}

http://jsfiddle.net/uWY5S/3/

Answer 2

我建议在固定的dom中安装另一个容器dom：

<div class="fixed">
  <div class="fixed-wrapper">
    <p>I scroll!</p>
  </div>
</div>

CSS：

html, body {height:100%;}
.fixed {position:fixed; height:100%; width:200px; background-color:black;}
.fixed-wrapper {position:relative; overflow-y:auto; height:100%;}
p {color:white; height:3000px;}

Answer 3

尝试将bottom:__px添加到您的固定框类CSS。

.fixed-box {
  position:fixed;
  top:5px;
  bottom:20px;
  width: 100px;
  overflow:auto;
}

http://jsfiddle.net/daCrosby/uWY5S/4/

带滚动条的固定盒子？

3 个答案: