css - 带滚动条的固定框？

Question

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

我目前的样式如下：

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

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

http://jsfiddle.net/uWY5S/

在上面的示例中，当我滚动时，文本始终位于页面顶部，这太棒了！但它被切断了，如果主页内容不够大，用户永远无法阅读最后一个:(

Answer 1

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

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

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

Answer 2

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

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

Answer 3

我建议在固定 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;}