html - CSS:如何使滚动条出现在div的边框之外？

Question

我正在为我的网站创建某种聊天框，但我无法让垂直滚动条出现在边框之外。 这就是我得到的:

我想要的只是滚动条出现在边界之外，在右边。它并不像现在这样漂亮，是吗。

thix box 的主要 HTML 代码(在聊天框中有一条消息)如下所示:

<div id="sb_body">
        <div id="sb_messages_set">
            <div class="sb_message">
                <div class="sb_message_header">
                    <div class="sb_message_author">PookyFan</div>
                    <div class="sb_message_hour">12:11</div>
                </div>
                <div class="sb_message_content">test</div>
            </div>
        </div>
<!-- Some other chatbox's elements -->
</div>

我的 CSS 代码如下所示:

div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}

有什么办法可以实现我想要的吗？我一直在寻找答案，但没有找到任何可以解决我的问题的东西。

哦，如果我的代码有任何问题，但它与我的问题无关，请分享你的想法，我最近才开始享受创建网站的乐趣，所以我可能在这里犯了一些新手错误并且我并没有真正意识到

编辑:我忘记提及的重要事情 - 我希望边框始终完全可见，我的意思是 - 我只希望滚动消息，但不使边框成为与它一起滚动。 换句话说，我不想要那样的东西:

在这张图片中，聊天框已经滚动了一点，顶部和底部框架不可见。但我希望整个框架可见，尽管 div 的内容正在滚动。

Answer 1

好吧，如果那行不通，而且您已与设计结合，我认为您必须使用背景图像。我找不到用 CSS 设置滚动条样式的方法。我用这个解决方案制作了另一个 jsfiddle:http://jsfiddle.net/jlmyers42/mrx46geg/

但基本上，您只需移动一些 CSS:

#sb_body {
  width: 272px;
  height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
  margin: 5px;
}
div.sb_message {
  padding: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
}